如果将font-family设置为sans-serif，那么字体顺序是什么？

Question

我试过谷歌搜索但找不到答案，我知道Arial首先......

另外，我见过人们做过

font-family: sans-serif, arial, 2nd font in sans-serif, 3rd font in sans-serif...

在sans-serif之后，它们似乎按照相应的顺序列出该系列中的所有字体。这不是不必要的工作，因为sans-serif是按顺序排列的那组字体的全部内容吗？

Answer 1

根据w3：

  

通用字体系列是一种后备机制，一种保留方式   一些样式表作者的意图在最坏的情况下没有   可以选择指定的字体。为了获得最佳的排版控制，   应在样式表中使用特定的命名字体。

字体应按您希望使用的顺序列出，然后浏览器将尝试按顺序应用它们，当它与用户系统上的字体不匹配时，根据需要继续浏览列表。

因此，首先列出后备字体是没有意义的，因为它们将在非通用字体系列渲染字体之前应用（在您的示例中）Arial被忽略并且sans-serif应用于顶部。它与仅使用font-family: sans-serif;相同。

Answer 2

“我知道Arial首先......”

在一般情况下肯定不是这样。我的意思是，你不能指望所有客户都这样做。

您可能会认为Arial在默认情况下会在某些语言环境中成为Windows 7的首选。但对Linux来说却不是这样。即使对于所有Windows用户来说也不一定如此，这取决于他们如何配置事物。您无法知道客户端将使用哪些字体。如果你对客户了解很多，你可以做出一些合理的猜测...但你必须详细说明你的客户应该是什么。

但是你对sans-serif是一个无所不能的人是正确的。将它放在列表的末尾是很常见的。我一开始没见过它。在它之后列出更多的东西是没有意义的。

Answer 3

正如您似乎怀疑的那样，正如其他答案所说，像sans-serif, arial这样的列表通常基于误解。但情况更复杂。

根据CSS 2.1规范，“所有五种通用字体系列都定义为存在于所有CSS实现中（它们不一定需要映射到五种不同的实际字体）。”但是，在我看来，我的Firefox 10违反了这一点。 ：它会忽略名称fantasy，以便font-family: fantasy, xxx导致使用xxx。

更基本的问题是规范要求在每个字符的基础上进行字体选择，而现代浏览器通常会实现这一点。因此，例如，即使在符合要求的实现中，如果该字体在系统上可用，则以下通常会使通用名称后面列出的字体用于特殊字符：

<style>
p.foo {  font-family: sans-serif, Arial Unicode MS; }
p.bar {  font-family: sans-serif, Lucida Sans Unicode; }
</style>
<p class=foo>Special: &#x2074;
<p class=bar>Special: &#x2074;

如果对应于通用名称sans-serif的字体包含上标四个字符（⁴）U + 2074，那么当然使用该字体，这两个段落没有渲染差异。但它可能没有。该字体可能是Arial，Helvetica或其他一些无衬线字体，具有相对较小的字符库。这意味着对于特殊字符，浏览器将使用font-family列表的其余部分。

如果您使用的是安装了Office的Windows系统，则很可能会看到上标四个字符的两个不同的字形 - 除非您已配置浏览器以便sans-serif映射到包含它的字体。