CSS设置字体——系列和风格
首先来了解一下CSS字体：
通用字体系列
前面讨论过，实际上相同的字体可能有很多不同的称呼，不过 CSS 迈出了勇敢的一步，力图帮助用户代理把这种混乱状况理清楚。
我们所认为的“字体”可能有许多字体变形组成，分别用来描述粗体、斜体文本，等等。例如，你可能已经对字体 Times 很熟悉。不过，Times 实际上是多种变形的一个组合，包括 TimesRegular、TimesBold、TimesItalic、TimesOblique、TimesBoldItalic、TimesBoldOblique，等等。Times 的每种变形都是一个具体的字体风格（font face），而我们通常认为的 Times 是所有这些变形字体的一个组合。换句话说，Times 实际上是一个字体系列（font family），而不只是单个的字体，尽管我们大多数人都认为字体就是某一种字体。
除了各种特定字体系列外（如 Times、Verdana、Helvetica 或 Arial），CSS 还定义了 5 种通用字体系列：
- Serif 字体
- 这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。例如，小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰，比如小写 l 顶部和底部的短线，或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。
- Sans-serif 字体
- 这些字体是成比例的，而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
- Monospace 字体
- Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相同，所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace 字体，而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。
- Cursive 字体
- 这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
- Fantasy 字体
- 这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。
理论上讲，用户安装的任何字体系列都会落入到上述某种通用系列中，但实际上可能并非如此，不过例外情况（如果有的话）往往很少。
<1>.字体系列
1 <html>
2 <head>
3 <style type="text/css">
4 p.serif {font-family: "Times New Roman",Georgia,Serif}
5 p.sansserif {font-family:Arial,Verdana,Sans-serif}
6 </style>
7 </head>
8
9 <body>
10 <h1>CSS font-family</h1>
11 <p class="serif">
12 This shows the Times New Roman font.
13 </p>
14 <p class="sansserif">
15 This shows the Arial font.
16 </p>
17 </body>
18 </html>
因此，我们建议在所有 font-family 规则中都提供一个通用字体系列。
这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，
就可以选择一个候选字体。
没错，serif就是候选字体，以防用户的电脑上没有装
serif前面的字体。
<2>.字体风格
1 <html>
2 <head>
3 <style type="text/css">
4 p.normal {font-style: normal}
5 p.italic {font-style: italic}
6 p.oblique {font-style: oblique}
7 </syle>
8 </head>
9
10 <body>
11 <p class="normal">This is a paragraph, normal.</p>
12 <p class="italic">This is a paragraph, italic.</p>
13 <p class="oblique">This is a paragraph, oblique.</p>
14 </body>
15 </html>
font-style属性最常用于规定斜体文本。
该属性有三个值：
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
italic 和 oblique 的区别
font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。
posted on 2011-09-18 20:08 More study needed. 阅读(3873) 评论(0) 编辑 收藏 举报
