CSS 字体系列

混乱的字体命名问题

设置字体属性是样式表的最常见的用途之一。不过,尽管字体选择很重要,但是目前还没有一种办法能确保在 Web 上一致地使用字体,因为没有一种统一描述字体和字体的变形的方法。

例如,字体 Times、Times New Roman 和 TimesNR 可能很类似,甚至完全相同,不过用户代理怎么能知道这一点呢?创作人员可能在一个文档中指定字体为 TimesNR,但是如果用户机器上没有安装这种字体,用户查看文档会看到什么呢?即使安装了 Times New Roman,用户代理也不知道这两个字体(Times New Roman 和 TimesNR)实际上是可以互换的。如果你希望一个浏览器上一定采用某种字体,请别妄想了。

与文字处理软件相比,CSS 对字体并没有提供更多的最终控制;比如加载你创建的一个 Microsoft Office 文档时,其显示可能取决于他已经安装的字体。如果他安装的字体与你的字体不同,那么文档看上去会大不相同。使用 CSS 设计的文档也是如此。

涉及到各种繁杂的字体变形时,如粗体或斜体文本,字体命名的问题就更是混乱。大多数人都知道,斜体文本看上去很像,但是很少有人能解释它与倾斜文本有什么区别,甚至不知道二者之间存在区别。

Slanted 并不是斜体风格(italic-style)文本的唯一别名,例如,你可能还会看到 oblique、incline(或 inclined)、cursive 和 kursiv 等待字眼。因此,一种字体可能有一个 TimesItalic 变形,而另一种字体可能使用 GeorgiaOblique 作为变形。尽管这两种字体实际上就相当于 Times 和 Georgia 字体的“斜体形式”,但是它们的“称呼”有很大的不同。类似地,字体变形词 bold、black 和 heavy 可能表示同一个意思,也可能不同。

通用字体系列

前面讨论过,实际上相同的字体可能有很多不同的称呼,不过 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。

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

CSS 基础教程

CSS 中级教程

CSS3 高级教程

CSS 响应式设计

CSS 网格教程

CSS 实例

CSS 测验

CSS 参考手册

目录