5.1 CSS 字体族（font-family）

优质

小牛编辑

436浏览

2023-12-01

CSS提供了一些字体属性，其中字体族 font-family 属性规定元素的字体系列，即定义选择哪个字体。

有两种类型的字体系列：通用字体族和指定字体族，其中通用字体族定义字母体系风格。而指定字体族是归属于某个通用字体族（体系）的具体实现。

通用字体族分为5组：

serif，是一种有比例有衬线字体，有比例指的是字母宽度不一，有衬线指的是意思是在笔画开始、结束的地方有额外装饰，且粗细有所不同，常见字体有宋体、Times。
sans-serif，是一种有比例但无衬线字体，常见字体有黑体、Arial。
monospace，是等宽的sans-serif，用于模拟打字机打出的字体，常用字体是Courier，容易对齐。
cursive，书写体，用来模拟人手写笔迹，比如中文的华文行草。
fantasy，很少使用。

下图很清楚的阐释了衬线的概念：

字体名称大小写不敏感，即 Song 和 song 是一样的。

通常文章的内文、正文使用的是易读性较佳的Serif字体，这可增加易读性，而且长时间阅读下因为会以单词为单位来阅读，较不容易疲倦。而标题、表格内用字则采用较醒目的Sans Serif字体，它需要显著、醒目，但不必长时间盯着这些字来阅读。比如本教程正文使用宋体，而标题使用雅黑。

像宣传品、海报类，为求醒目，它的短篇的段落也会采用Sans Serif字体。但在书籍、报刊杂志，正文有相当篇幅的情形下，则应采用Serif字体来减轻读者阅读上的负担。在Web设计及浏览器设置中也应遵循此原则。

由于 font-family 属性被所有HTML子元素所继承，所以我们可以给 <body> 元素设置一个字体作为文档的默认字体。如下所示：

body{ font-family: Microsoft Yahei;}

使用通用字体族的问题是网页的设计将依赖于用户浏览器的字体选择设置，而指定字体族可以获得一致的视觉体验。

body{ font-family: Arial;}

如上定义，你的网页文本将使用指定字体Arial，前提是该字体已被安装在用户电脑上。如果Arial字体不可用，将使用浏览器的默认serif字体（通常是Times）。

不过Arial是一个安全的选择，因为所有的Windows PC和苹果机，以及绝大部分Linux系统都安装了该字体。这样的字体被看作是网页安全（web-safe） 字体。

常用网页安全的字体有：

font-family 属性支持多个取值，以分号隔开，并采用一种回退机制来选择字体。即按从左到右的顺序，如果浏览器不支持第一个字体，则会依次尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称的一个优先表。浏览器会使用它可识别的第一个值。

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

浏览器首先尝试使用 Arial ，不行则退而求其次，尝试 Verdana，如果还是不行，则将使用浏览器默认的 sans-serif 字体。

使用通用字体族作为字体序列的最后一个是好的实践。语义上来讲，如果你不确定使用哪个字体，你至少应该知道使用哪种字体。

设计师喜欢使用一些个性化的字体，而这些字体通常是不安全的，为此CSS支持通过在样式中显式引入字体文件的方式来使用特定字体。这样，尽管用户电脑没有安装该字体，但网站提供了该字体。

具体语法是使用：@font-face，后面会讲解。实践上，有一些大公司或服务商提供了集中的在线字体库供设计师和开发人员使用，如 Google Fonts 和 Typekit。