Question

我正在尝试决定要用于我网站的字体。

为什么当人们指定font-family时，他们会给出一个字体列表？有没有办法只指定一种字体？是否使用列表中的不同字体取决于用户访问该站点时使用的浏览器？

这就是我见过其他人的方式：

body {
    font: 14px Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
    color: rgba(51,51,51,1);
}

有没有理由不这样做？

body {
    font: 14px Cambria;
    color: rgba(51,51,51,1);
}

Answer 1

他们后备字体。如果列出的第一个字体在操作系统上不可用，则使用下一个字体。如果没有，则使用之后的下一个。等等。最后一个通常是所有系统（即serif）上都可用的通用字体。

Answer 2

将字体列表指定为font-family值有两个原因。

首先，您的主要字体可能未安装在用户的系统中。例如，Cambria仅存在于Windows的相对新版本中。示例中的字体列表并不是特别好，因为在大多数情况下Cambria不可用，它会回溯到Times New Roman，这是常见的浏览器默认设置，并且在典型的屏幕上效果不佳。

其次，文本中可能存在主要字体不支持的字符。例如，如果文本包含“℀”（U + 2100 ACCOUNT OF），则列出的所有字体都没有 - 因此将使用与浏览器相关的后备字体，这通常会导致排版不匹配。（因此，如果出现这样的字符，则列表应该更长。）某些浏览器（某些版本的IE）甚至可能无法呈现字符，除非您通过使用合适的字体列表帮助他们。

现在人们经常通过@font-face使用可下载的字体（网络字体），并期望它们在所有浏览器中使用，因此不需要列出其他字体。但是，即使可下载的字体也可能会失败：字体加载可能会失败（网络问题），或者浏览器中的设置可能会阻止使用可下载字体。这就是为什么即使使用可下载字体，后备字体也是一个好主意。

使用可下载字体作为主要字体，还有另一个后备字体的原因：下载可能需要一些时间，在等待字体时，浏览器使用后备字体呈现文本。下载字体后，浏览器将更改为该字体。为了减少这里有点令人不快的“闪光”效果，您可以尝试指定一个与可下载字体足够相似的后备字体或备用后备字体。

Answer 3

这些额外的字体是后备。如果客户端的机器没有第一个字体，它将查找第二个，第三个等...

有没有理由不这样做？ body { font: 14px Cambria; color: rgba(51,51,51,1); }

如果要使用特定字体或接近特定字体，则必须包含后备字体。如果您不介意浏览器使用默认的系统字体，那么无论您是否包含它们都无关紧要。

了解字体系列

3 个答案: