0

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

为什么当人们指定 a 时，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);
}
4

3 回答 3

3

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

于 2013-03-29T01:20:01.207 回答
2

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

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

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

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

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

于 2013-03-29T04:56:37.093 回答
1

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

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

如果你想使用一种特定的字体，或者一种接近它的字体，你必须包含备用字体。如果您不介意浏览器使用默认系统字体，那么是否包含它们都没有关系。

于 2013-03-29T01:20:15.333 回答