1.设置文本的字体
p.serif { font-family:'Times New Roman', Times, serif; } p.sansserif { font-family: Arial, Helvetica, sans-serif; }
<body> <h1>CSS font-falily</h1> <p class="serif">这一段的字体是Times New Roman</p> <p class="sansserif">这一段的字体是Arial</p> </body>
2.设置字体大小
h1 { font-size: 250%; } h2 { font-size: 200%; } p { font-size: 100%; }
<body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> </body>
3.用px设置的字体的大小
h1{ font-size: 50px; } h2 { font-size: 40px; } p { font-size: 12px; }
<body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p> <p><b>注意:</b>这个例子在 IE9之前的版本不工作, prior version 9.</p> </body>
4.用em设置的字体的大小
h1{ font-size: 3.125em; /* 50px/16=3.125em*/ } h2 { font-size: 2.5em; /* 40px/16=2.5em*/ } p { font-size: 0.75em; /* 12px/16=0.75em*/ }
<body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p> <p><b>注意:</b>这个例子在 IE9之前的版本不工作, prior version 9.</p> </body>
5.用百分比和em设置字体的大小
body { font-size: 100% } h1 { font-size: 3.125em; /* 50px/16=3.125em*/ } h2 { font-size: 2.5em; /* 40px/16=2.5em*/ } p { font-size: 0.75em; /* 12px/16=0.75em*/ }
<body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p> <p><b>注意:</b>这个例子在 IE9之前的版本不工作, prior version 9.</p> </body>
6.设置字体样式
p.normal { font-style: normal; } p.italic { font-style: italic; /* 浏览器会显示一个斜体的字体样式*/ } p.oblique { font-style: oblique; /* 浏览器会显示一个倾斜的字体样式*/ }
<body> <p class="normal">这是一个段落，正常。</p> <P class="italic">这是一个段落，斜体。</P> <P class="oblique">这是一个段落，斜体。</P> </body>
7.设置字体的异体
p.capitalize { font-variant: normal; } p.smallcaps { font-variant: small-caps; }
<body> <P class="capitalize">my name is hege refsnes.</P> <p class="smallcaps">my name is hege refsnes.</p> </body>
8.设置字体的粗细
p.normal { font-weight: normal; } p.lighter { font-weight: normal; } p.thick { font-weight: bold; } p.thicker { font-weight: 900; }
<body> <P class="normal">This is a paragraph.</P> <p class="lighter">This is a paragraph.</p> <p class="thick">This is a paragraph.</p> <p class="thicker">This is a paragraph.</p> </body>
9.在一个声明的所有字体属性
p.space { font: 15px arial,sans-serif; } p.oblique{ font: oblique bold 15px Georgia,serif; }
<body> <p class="space">This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p> <P class="oblique">This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</P> </body>