浏览器如何管理字体

上个月我写了《排版入门：基础篇》，它解释了通用排版的基本方面。在本文中，我将探讨网页浏览器中的排版。换句话说，浏览器究竟如何处理字体？

Web Safe Fonts（网络安全字体）

首先，我想谈谈 Web Safe Fonts（网络安全字体）。在我之前的文章中，我只是简单地提到存在 Web Safe Fonts，某些字体会被所有浏览器显示，而另一些则不会。要理解这一点，我们需要了解浏览器从哪里获取字体。在大多数情况下，浏览器会直接从你的本地目录中拉取字体，即你计算机上已安装的字体。因为某些字体——据称——随 Windows、Mac OS X 和 Linux 的所有版本捆绑提供，这些字体被认为是“Web Safe”。这意味着无论你在哪台机器上使用，浏览器总能找到特定的字体。

关于某些字体是否真正属于“Web Safe”，存在一些争议，我稍后会对此进行说明。Font Tester 是确定字体是否为 Web Safe 的绝佳资源。它不仅为你提供用于测试和预览字体的 Web 界面，还提供一份 Web Safe 字体列表。

Font Stacking（字体堆叠）

注意，我在谈论操作系统一致的字体时使用了“据称”一词。这是因为不同操作系统之间存在一些字体差异。但浏览器被设计为处理这种情况，并使用字体族来实现跨系统字体兼容。经典的例子是 Arial 和 Helvetica。大多数，如果不是全部的话，Windows 机器都安装了 Arial 字体。同样，大多数，如果不是全部的话，Mac 机器都安装了 Helvetica 字体。就 Web Safe 字体而言，Arial 和 Helvetica 对浏览器来说是可互换的。在大多数情况下，如果网页请求 Arial 而浏览器在用户机器上找不到它，浏览器会自动替换为 Helvetica。对于请求 Helvetica 但用户只有 Arial 的情况也是如此。

这就是“字体堆叠”变得极其重要的地方。在 Font Tester 的 Web Safe 字体列表中，列表中的大多数行至少包含两种字体，后跟衬线体（serif）、无衬线体（sans serif）或等宽体（monospace）——一种字符间固定宽度的字体分类。这被称为字体堆叠。本质上，浏览器将每个字体序列视为首选字体、次选字体、第三选择，依此类推。如果浏览器无法在序列中找到任何字体，它将回退到默认的衬线体、无衬线体或等宽体字体，具体取决于所使用的字体分类。

字体栈不仅用于确保浏览器最终显示一种可接受的字体。我之前还提到，关于某些字体是否可以被视为“Web 安全字体”存在一些争议。例如，大多数操作系统都安装了 Century Gothic 字体，但有 10% 到 20% 的系统没有安装。因此，你可以创建一个字体栈，首选 Century Gothic，其次是 Arial、Helvetica，最后是 sans-serif（无衬线）通用分类。（在 CSS 中，请注意，标题中包含多个单词的字体名称需要用引号括起来。）

font-family: “Century Gothic”, Arial, Helvetica, sans-serif;

这将指示浏览器首先查找 Century Gothic 字体。由于大部分系统都安装了该字体，大多数访问者将以 Century Gothic 字体查看网站。对于未安装 Century Gothic 的访问者，浏览器将依次回退到 Arial，然后是 Helvetica，最后是无衬线替代字体。

字体栈使用指南

虽然字体栈是自定义网站字体的有效方法，但仍有一些注意事项。首先，确保你的字体栈保持一致性。至少，栈中的字体应全部为衬线体、无衬线体或等宽字体之一。像 Arial、“Times New Roman”、“Lucida Console”、sans serif 这样混合使用的字体栈是不好的做法。这不仅违背了一致性原则，还会导致不同系统上安装的字体不同，从而使网站外观差异巨大。相反，应选择外观相似的字体，以确保无论访问者安装了哪些字体，网站整体风格保持一致。此外，栈中的字体不仅外观要相似，比例也应相近。避免在栈中使用宽度差异过大的字体，即使它们在其他方面看起来相似。


另一个需要避免的做法是在字体栈中使用过多字体。虽然在技术上并不限制你在一个字体栈中使用多达 20 种字体，但这并非良好实践。关于字体栈中应包含多少种字体，并没有所谓的“黄金法则”。一些设计师认为四到六种字体是可接受的，而另一些人则建议六到十种。这主要取决于你个人的选择。

最后，也是最重要的一点，始终在字体栈末尾包含一个通用字体族。这是浏览器的最后备选方案，以防访问者的系统中未安装栈中的任何其他字体。

使用非 Web 安全字体

既然我们已经了解了浏览器如何获取字体以及如何构建字体栈，接下来让我们看看如何使用那些不被视为 Web 安全的字体。

在继续之前，我必须添加一个免责声明。虽然有多种方法可以让浏览器显示非网页安全字体，但这些方法因浏览器及其版本而异。许多旧版浏览器无论如何都无法显示非网页安全字体。然而，既然我们现在已经知道如何创建字体栈，我们就可以为旧版浏览器添加“备用”字体，而不是在字体栈中使用非网页安全字体。

尽管有多种方法可以让浏览器渲染额外的字体，但我只会讨论 @font-face CSS 方法。这是一种非常简单却强大的方式，只需几行额外的 CSS 代码即可在网站中使用其他字体。

在最简单的形式下，@font-face CSS 代码如下所示：

@font-face { font-family: DemoFont; src: url('DemoFont.ttf'); }

在此示例中，“demofont.ttf” 存储在你网站的根目录中。将此 CSS 代码添加到样式表中，可将字体族 “demofont” 包含到浏览器可用的字体选项列表中。插入此代码后，你可以像使用网页安全字体一样设置字体栈，但现在要包括新的 “demofont”。

font-family: DemoFont, Arial, Helvetica, sans-serif;

在使用 @font-face（或任何其他字体替换方法）时，拥有备用字体变得尤为重要，因为特定浏览器无法生成字体的可能性更大。

@font-face 跨浏览器使用

不同浏览器对显示非网页安全字体的反应各不相同，不幸的是，浏览器对使用 @font-face 的反应也各不相同。各大主要浏览器通过 @font-face 支持不同的字体类型。Internet Explorer 仅接受 EOT 字体，而 Firefox 仅支持 OTF 和 TTF 字体，依此类推。幸运的是，由于 Paul Irish 的 Bulletproof @font-face 语法。

无需深入技术细节，Bulletproof @font-face 语法使用 CSS 代码来包含字体的所有版本，并根据哪个浏览器将渲染该字体来选择其中一个。你可以选择自行探索 Irish 语法的 technical 方面并自行查找字体。不过，我将跳过这部分，转而采用一种更简单的方法：通过 Font Squirrel 使用带有 Bulletproof 语法的 @font-face。

Font Squirrel

Font Squirrel 是一个寻找既美观又可免费用于商业用途的字体的优秀网站。它还有数百种附带 @font-face 套件的字库，其中包含每种浏览器所需的字体各个版本，以及一个包含所有必要 @font-face 代码的 .css 文件。

同样，你可以自行探索 Irish 的 Bulletproof @font-face 语法并自行找到所有获得授权的字体。或者，你可以走捷径，使用 Font Squirrel。

总结

尽管目前浏览器中没有用于显示非 Web 安全字体的标准，但了解浏览器如何处理字体将有助于您自定义网站的字体——直到相关标准出台。