CSS 基础：回退字体栈，打造更强大的网页排版

在 CSS 中，您可能会看到这样的规则集

html {
  font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
}

怎么回事？为什么不能直接指定要使用的字体呢？这里的关键是回退。浏览器会首先尝试使用您指定的字体（本例中是 Lato），但如果它无法使用该字体，则会继续使用列表中的下一个字体。所以，更详细地说，这条规则的意思是

请使用 Lato 字体。
如果没有 Lato，请尝试使用“Lucida Grande”。
如果没有 Lucida Grande，请尝试使用 Tahoma。
如果以上都不行，请使用默认的 Sans-Serif 字体。

那么，在什么情况下浏览器会无法使用您指定的字体呢？这种情况很常见。只有少数字体被认为是“网络安全”字体，这意味着大多数访问您网站的计算机都安装了这些字体，浏览器可以正常使用它们。例如：Arial、Times New Roman、Courier、Georgia、Verdana 以及其他一些字体。

但是，如今大多数网站都使用自定义网页字体。它们将字体作为资源加载（就像网站将 CSS 本身作为资源加载、图片或 JavaScript 一样），然后就可以在 CSS 中使用该字体。广受欢迎的 Google Fonts 使得这一点非常清晰

即使您以这种方式加载字体，也仍然有可能无法加载。虽然 Google 通常是一个非常可靠的托管服务提供商，但您无法控制它们的服务器，它们可以自行决定。更常见的情况是，糟糕的网络连接可能会阻止字体加载。在任何字体加载失败的情况下，回退字体栈都会派上用场。

假设我使用自定义字体 Merriweather，并将我的字体栈设置为以下形式

html {
  font-family: Merriweather, Impact, Serif;
}

如果 Merriweather 无法加载（或已加载，但以一种在加载后弹出到位的形式加载，也称为 FOUT），我们会看到这样的情况

最好让字体回退到与您的首选字体相似的字体，而不是完全无关的字体！Monica Dinculescu 创建了一个很棒的工具，叫做 Font style matcher，您可以在其中尝试不同的回退字体（我就是用它创建了上面的 GIF）。

在上面的示例中，我们可以看到 Georgia 比 Impact 要好得多！当然，示例比仅仅更改字体要复杂一些。更改了其他一些设置，使它们尽可能匹配。要充分利用这一点，您需要了解字体加载方面的知识，这会有点复杂。最好的方法是咨询 Zach Leatherman 的全面网页字体指南。无论如何，仅选择一个好的回退字体也是值得的。

单个字符

关于回退字体的有趣之处在于，它并非全有或全无。如果指定的字体中没有某个字符，则字体栈中的单个字符可能会回退到下一个字体。

举一个极端的例子，我将从 Google Fonts 加载自定义字体 Source Code Pro，但将限制其包含的字母数量。

您可以在第一句话中看到，回退字体接管了，即使自定义字体中没有某些字符，最终结果也不至于很糟糕（不像第二句话）。这种情况更有可能发生在非常规的 ASCII 字符或重音字符上，例如 ü, ā, or ñ.

作为一些额外的乐趣，以下是利用 CSS 的字符回退功能来实现一些独特效果的示例

单个字符

更多阅读

评论