CSS：权威指南，第 5 版

第 14 章 字体 字体

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

在 1996 年编写的CSS1 规范中，"字体属性 "部分以这样一句话开头："设置字体属性将是样式表最常见的用途之一"。尽管 CSS 一开始就意识到了字体的重要性，但直到 2009 年左右，这一功能才真正开始得到广泛而一致的支持。随着可变字体的引入，网络上的字体设计已成为一种艺术形式。虽然您可以在设计中使用任何合法发行的字体，但您必须注意如何使用它们。

重要的是要记住，这并不是对字体的绝对控制。如果您使用的字体无法下载，或者是用户浏览器无法理解的文件格式，文本将（最终）使用后备字体显示。这是件好事，因为这意味着用户仍然能看到你的内容。

虽然字体似乎对设计至关重要，但请记住，你不能依赖于某种字体的存在。如果字体加载缓慢，浏览器通常会延迟文本渲染。虽然这可以防止用户在阅读时重新绘制文本，但页面上没有文本就不好了。

用户的偏好或旨在增强阅读体验的浏览器扩展功能也可能会覆盖你的字体选择。 浏览器扩展 OpenDyslexic 就是一个例子，它 "用 OpenDyslexic 字体覆盖网页上的所有字体，并将网页格式化，使其更易于阅读"。 总之，在设计时一定要假设你的字体会出现延迟，甚至完全失效。

字体家族

我们所认为的 "字体 "通常由许多变体组成，用于描述粗体文字、斜体文字、粗斜体文字等。例如，你可能熟悉（或至少听说过）Times 字体。Times 实际上是许多变体的组合，包括 TimesRegular、TimesBold、TimesItalic、TimesBoldItalic 等。Times 的每个变体都是一个实际的字面，而我们通常认为的 Times 就是所有这些变体字面的组合。换句话说，像 Times 这样的系统标准字体实际上是一个字体族，而不仅仅是一种字体，尽管我们大多数人认为字体是单一的实体。

在字体系列中，每个宽度、重量和样式组合（即每个字面）都需要一个单独的文件，这意味着一个完整的字体可能需要多达 20 个单独的文件。 另一方面，可变字体可以在单个文件中存储多种变体，如普通、粗体、斜体和粗斜体。 可变字体文件通常比任何单个字面文件稍大（可能只有几千字节），但比普通字体所需的多个文件要小，而且只需要一个 HTTP 请求。

为了涵盖所有字体，CSS 定义了五种通用字体族：

衬线字体

有衬线字体是有衬线的比例字体。如果字体中的所有字符都有不同的宽度，那么该字体就是成比例的。例如，小写i和小写m占用的水平空间不同，因为它们的宽度不同。(有衬线字体的例子有 Times、Georgia 和 New Century Schoolbook。

无衬线字体

无衬线字体成比例，没有衬线。无衬线字体的例子有 Helvetica、Geneva、Verdana、Arial 和 Univers。

单行字体

单空格字体不按比例。相反，每个字符占用的水平空间与所有其他字符相同；因此，小写i与小写m 占用的水平空间相同，尽管它们的实际字形宽度可能不同。这些字体一般用于显示程序代码或表格数据，例如本书的代码字体。如果字体具有统一的字符宽度，无论是否有衬线，都被归类为单空字体。单空间字体的例子有 Courier、Courier New、Consolas 和 Andale Mono。

草书字体

草书字体试图模仿人类手写或书写。通常，它们主要由流动的曲线组成，笔画装饰也超过衬线字体。例如，大写字母A的左脚底部可能有一个小卷曲，或者完全由斜线和卷曲构成。草书字体的例子有 ...