网页设计师应该清楚地认识到，字体选择是一个常见（而且重要）的特性。毕竟，有多少页面分布着数十个甚至数百个<FONT FACE="...">标记呢？实际上，规范中“字体属性”一节最开始就有这样一句话：“设置字体属性是样式表的最常见用途之一。”

不过，尽管字体选择很重要，但是目前还没有一种办法能确保在网页上一致地使用字体，因为没有一种统一描述字体和字体的变形的方法。例如，字体Times、Times New Roman和TimesNR可能很类似，甚至完全相同，不过网页浏览器怎么能知道这一点呢？网页设计师可能在一个文档中指定字体为TimesNR，但是如果用户机器上没有安装这种字体，用户查看文档时会看到什么呢？即使安装了Times New Roman，用户代理也不知道这两个字体（Times New Roman和TimesNR）实际上是可以互换的。如果你希望一个阅读器上一定采用某种字体，请别妄想了。

尽管CSS2支持可下载字体，并定义了相应属性，不过这些字体在Web浏览器中并未得到很好的实现，而且出于性能方面的原因，阅读器总会拒绝下载字体。与字处理器相比，CSS对字体并没有提供更多的最终控制，别人加载你创建的一个Microsoft Office文档时，其显示可能取决于他已经安装的字体。如果他安装的字体与你的字体不同，那么文档看上去会大不相同。使用CSS设计的文档也是如此。

涉及到各种繁杂的字体变形时，如粗体或斜体文本，字体命名的问题就更是混乱。大多数人都知道，斜体文本看上去很像，但是很少有人能解释它与倾斜文本有什么区别，甚至不知道二者之间存在区别。Slanted并不是斜体风格（italic-style）文本唯一的别名，例如，你可能还会看到oblique、incline （或inclined）、cursive和kursiv等等字眼。因此，一种字体可能有一个Tinieslulic变形，而另一种字体可能使用GeorgiaOblique作为变形。尽管这两种字体实际上就相当于Times和Georgia字体的“斜体形式”，但是它们的“称呼”有很大不同。类似地，字体变形词bold、black和heavy可能表示同一个意思，也可能不同。

CSS试图为所有这些字体问题提供一些解决机制，不过它不能提供一个全面的解决方案。CSS字体处理中最复杂的部分是字体系列（font-family）匹配和字体加粗（font-weight）匹配，其次是字体大小（font-size）计算。CSS中与字体有关的方面还包括字体风格（如斜体）和字体变形（如小型大写字母），相对而言，这些方面都比较直接。字体样式的所有这些方面都集中到一个属性，即font，本章后面将讨论这个属性。首先，先来讨论字体系列，因为在为文档选择适当的字体时这是最基本的一步。

字体系列

前面讨论过，实际上相同的字体可能有很多不同的称呼，不过CSS迈出了勇敢的一步，力图帮助用户代理把这种混乱状况理清楚。毕竟，我们所认为的“字体”可能由许多字体变形组成，分别用来描述粗体、斜体文本，等等。例如，你可能已经对字体Times很熟悉。不过，Times实际上是多种变形的一个组合，包括TimesRegular、TimesBold、 Timesltalic、TimesOblique、TimesBoldltalic, TimesBoIdOblique，等等。Times 的每种变形都是一个具体的字体风格（font face），而我们通常认为Times是所有这些变形字体的一个组合。换句话说，Times实际上是一个字体系列（font family），而不只是单个的字体，尽管我们大多数人都认为字体就是某一种字体。

除了各种特定字体系列外（如Times, Verdana. Helvetica或Arial），CSS还定义了5种通用字体系列。

Serif 字体

这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则称该字体是成比例的。例如，小写i和小写m的宽度就不同。上下短线是每个字符笔划末端的装饰，如小写/顶部和底部的短线，或大写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 字体

这些字体试图模仿人的手写体。通常，它们主要由曲线和sedf字体中没有的笔划装饰组成。例如，大写A在其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成，cursive字体的例子包括Zapf Chancery、Author和Comic Sans。

Fantasy 字体

这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其划归到任何一种其他的字体系列当中。这样的字体包括Western、Woodblock和 Klingon。

理论上讲，用户安装的任何字体系列都会落入到上述某种通用系列当中。但实际上可能并非如此，不过例外情况（如果有的话）往往很少。

使用通用字体系列

可以使用属性font-family在文档中采用上述任何字体系列。

font-family

值：

[[<family-name>|<generic-family>]，]* [<family-name> | <generic-family>] | inherit

初始值：

用户代理指定的值

应用于：

所有元素

继承性：

有

计算值：

根据指定确定

如果你希望文档使用一种sans-serif字体，但是你并不关心是哪一种具体字体，以下就是

一个合适的声明：

body {font-family: sans-serif;}

这样用户代理就会从sans-serif字体系列选择一个字体（如Helvetica），并将其应用到body元素。因为有继承，这种字体选择还将应用到body元素中包含的所有元素，当然，除非有一种更特定的选择器将其覆盖。只使用这些通用系列（而不做其他指定），网页设计师就能创建相当复杂的样式表，以下规则的显示见图5-1所示：

body {font-family: serif;}

h1, h2, h3, h4 {font-family: sans-serif;}

code, pre, tt, span.input {font-family: monospace;}

p.signature {font-family: cursive;}

因此，文档大部分会采用某种serif字体（包括大多数段落），如Times，但class为 signature的段落除外，这些段落会用一种cursive字体显示，如Author。1~4级标题都采用sans-serif字体，如Helvetica，而元素code、pre,tt和span,input将使用某种monospace字体，如Courier很巧合，本书中的这些元素通常也正是这样显示的。

指定字体系列

另一方面，创作人员对于文档或元素的显示中使用何种字体可能有一些更特定的取向。类似地，用户也可能想创建一个用户样式表，定义所有文档显示中使用的具体字体。不论哪一种情况，还是要使用font-family属性。

假设目前所有h1都应当使用Georgia字体。对此最简单的规则如下：

h1 {font-family: Georgia;}

这会使显示文档的用户代理对所有h1都使用Georgia字体，如图5-2所示。

当然，这个规则假设用户代理上Georgia字体可用。如果Georgia字体不可用，用户代理就根本不能使用这个规则。它不会忽略这个规则，但是如果无法找到一个名叫Georgia 的字体，它可能只能使用用户代理的默认字体来显示h1元素，除此以外什么也不做。

不过，不必万念俱灰。通过结合特定字体名和通用字体系列，可以创建与你预想的完全相同（或者至少很接近）的文档。再来看前面的例子，以下标记告诉一个用户代理使用Georgia（如果可用），如果Georgia字体不可用，则使用另外一种serif字体。

h1 {font-family: Georgia, serif;}

如果读者没有安装Georgia字体，但是安装了Times字体，用户代理就可能对h1元素使用Times，尽管Times与Georgia并不完全匹配，但至少足够接近。

处于这个原因，强烈建议在所有font-family规则中都提供一个通用字体系列。这样一来，就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。这种候补策略很有帮助，因为在一个跨平台环境中，将无法知道谁安装了什么字体。没错，世界上所有Windows机器都可能安装了Arial和Times New Roman 字体，但是有些Macintosh并没有（特别是较老的机器），Unix机器可能也是如此。相反地，尽管在所有现代Macintosh机器上都安装了MarkerFelt和Charcoal，但Windows 和Unix用户不太可能安装其中某种字体，同时安装这两种字体的更是少之又少。以下是另外一些例子：

h1 {font-family: Arial, sans-serif;}

h2 {font-family: Charcoal, sans-serif;}

p {font-family: TimesNR, serif;}

address {font-family: Chicago, sans-serif;}

如果你对字体很熟悉，显示一个给定元素时可能会想到很多类似的字体。假设你希望一个文档中的所有段落都使用Times显示，不过也接受TimesNR、Georgia、New Century Schoolbook和New York （所有这些都是serif字体）。首先，先确定这些字体的优先顺序，然后用逗号把它们连起来：

p {font-family: Times, TimesNR,'New Century Schoolbook', Georgia,'New York'、serif;}

根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择一种可用的serif字体。

使用引号

你可能注意到了，前面的例子中出现了单引号，这在以前没有出现过。只有当一个字体名中有一个或多个空格（如New York），或者如果字体名包括#或$之类的符号，才需要在font-family声明中加引号。在这些情况下，整个字体名应当用引号括起，这样用户代理才能搞清楚字体名到底是什么（你可能认为有逗号就足够了，但并非如此）。因此，名为Karrank%的字体就应当加引号：

h2 {font-family: Wedgie,'Karrank%', Klingon, fantasy;}

如果没有引号，尽管规则的余下部分还会得到处理，但用户代理有可能忽略这个特定的字体名。注意，根据CSS2.1规范，包含符号的字体名并不一定要加引号，但这是一种推荐做法，它类似于CSS规范中描述的“最佳实践”。类似地，对包含空格的字体名也建议加引号。可以看到，唯一必须加引号的是与所接受关键字匹配的字体名。因此，如果需要一种名为“cursive”的字体，就必须加引号。

显然，字体名中如果只包含一个词，而且这个词与font-family的任何关键字都不冲突，就不需要加引号，通用字体系列名（serif、monospace等等）在指示具体的通用系列时就不能加引号。如果将一个通用名用引号引起，用户代理就会认为你需要一个与此同名的特定字体（例如，serif），而不是一个通用字体系列。

至于使用单引号还是双引号，这两种都是可以接受的。要记住，如果把一个font-family 规则放在style属性中，则需要使用该属性本身未曾使用的那种引号。因此，如果使用双引号将font-family规则括起，就必须在规则内部使用单引号，如以下标记所示：

p {font-family: sans-serif;}/* sets paragraphs to sans-serif by default */

<!-- the next example is correct (uses single-quotes)-->

<p style="font-family:'New Century Schoolbook', Times, serif;">…</p>

<!-- the next example is NOT correct (uses double-quotes)-->

<p style="font-Family:"New Century Schoolbook", Times, serif;">...</p>