3.1.1 字体系列

CSS规范清楚的认识到，字体选择是一个常见而且很重要的特性，所以设置字体的属性就是样式表中最常见的用途之一。

字体相关的属性在CSS1就已经定义，CSS3又新增了font-stretch 和 font-size-adjust 这两个属性。

人们早已认识到字体选择很重要，并在CSS2就支持可下载字体，也定义了 @font-face 相关属性，但是并没有得到浏览器的广泛支持。直到CSS3，浏览器才开始支持 @font-face，使设计师可以在网页中使用自己喜欢的任意字体。

字体系列

在CSS中，通过 font-family属性来指定文本所使用的字体系列。语法格式为：

font-family: [<family-name> | <generic-family>] #

其中，family-name为字体系列的名称；generic-family为通用字体系列的名称。也就是说，font-family属性的值既可以是具体的字体系列的名称，也可以是通用字体系列的名称。

CSS定义了 5 种通用字体系列，分别是serif、sans-serif、cursive、fantasy、monospace，font-family属性可用使用其中的任何一种。如果希望文档使用一种通用字体系列中的某个字体，但并不关心是哪一种具体的字体，使用通用字体系列就比较合适。如：

body  {	font-family: sans-serif;}

这样，浏览器就会从 sans-serif 字体系列中选择一种字体，并将它应用到 body 元素。由于 font-family属性具有继承性，这种字体将会应用到 body 元素中的所有元素，除非有一种更特殊的选择器将其覆盖。

选择字体时，要尽量选择能够引人注目（特别是标题），并且容易阅读的字体。当然，设计师也可以选择使用特定的字体。假如设计师希望所有 h1 标题都使用 Georgia 字体，可以使用以下声明：

h1  {	font-family: Georgia;}

这会使浏览器对所有 h1 标题都使用 Georgia 字体。当然，这个规则是假设访问者的计算机上已经安装了该字体。并且，设计师总是希望使用任何想要的字体，遗憾的是，如果访问者的计算机上没有安装该字体，浏览器便会使用默认字体来显示 h1 标题。

不过，不必万念俱灰，通过结合特定字体和通用字体系列，可以创建与你预想相同的文档。可以使用以下规则，告诉浏览器使用 Georgia 字体（如果可用），如果 Georgia 字体不可用，就使用另外一种 serif 字体：

h1  {	font-family: Georgia, serif;}

这时，如果访问者的计算机上没有安装Georgia字体，但安装了 Times 字体，浏览器就会使用 Times。尽管 Times 与 Georgia 并不完全匹配，但至少足够接近。

 出于这个原因，强烈建议在所有 font-family 规则中，都提供一个通用字体系列。这样一来，就提供了一条后路。

如果你对字体很熟悉，也可以在 font-family属性中指定想要的字体，并按优先顺序依次排列，中间用逗号分隔。如：

body {	font-family: Arial, SimSun, Helvetica, sans-serif;}

浏览器会根据这个列表，按顺序查找这些字体，如果访问者的计算机上安装了第一种字体，就可以正确显示。如果没有安装第一种字体，就自动切换到第二种、第三种字体，以此类推。如果所有字体都没有找到，就会从 sans-serif 字体系列中选择一种可用的字体。

利用这个特性，还可以实现英文和中文使用不同字体的效果。通常的做法是，把英文字体写在前面，中文字体写在后面。如：

p {  font-family:  Arial, 'Microsoft YaHei';   /* Arial，微软雅黑 */}

这样，浏览器会优先使用 Arial 字体显示文本，由于中文字符不识别 Arial 字体，就会在后面的字体中继续查找，找到 Microsoft YaHei 字体后，便对中文应用该字体，这样，就达到了中文和英文使用不同字体的效果。

在指定字体时，如果字体名称中包含空格或中文或其他特殊字符，则要把整个字体名称用放在引号中，可以使用单引号，也可以使用双引号。并且，字体名称不区分大小写。

对于中文，有三种指定字体的方法：一种是直接使用中文字体名称，一种是使用英文字体名称，一种是使用字体的 unicode 码。但是，在CSS文档中定义字体时，如果直接书写中文，经常会出现乱码，或者在某些浏览器下字体不生效。一个常用的解决办法，是把中文字体名称转换为对应的英文字体名称或unicode 码。如，宋体的英文字体名称为 SimSun、unicode 码为 \5B8B\4F53，则可以写成：

p {  font-family: SimSun;}

也可以写成：

p {  font-family: "\5B8B\4F53";}

上述两种写法是等价的，可以自行选择。为了方便查阅，几种常用字体的中文名称、英文名称、unicode码的对照关系见表 3‑1。

虽然CSS提供了备选字体的机制，但是，在CSS3之前，所有的字体都只能是Web安全字体（即预先安装在主流个人计算机操作系统中的字体的子集）。直到CSS3中@font-face的出现，这个问题才彻底得到解决。

input, select, textarea {   font-family: inherit; }