关于CSS:如果将font-family设置为sans-serif,则字体顺序是什么?


If you set the font-family to only sans-serif what is the font order?

我尝试使用谷歌搜索,但找不到答案,我知道Arial首先出现...

此外,我见过有人这样做

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

似乎在sans-serif之后,他们按照各自的顺序列出了该系列中的所有字体。这不是不必要的工作,因为sans-serif是按顺序排列的那组字体的全部内容吗?


每w3:

Generic font families are a fallback mechanism, a means of preserving
some of the style sheet author's intent in the worst case when none of
the specified fonts can be selected. For optimum typographic control,
particular named fonts should be used in style sheets.

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

因此,先列出后备字体确实没有任何意义,因为将在非通用字体家族渲染字体(例如,在您的示例中)使用Arial并应用sans-serif top之前应用它们。与仅使用font-family: sans-serif;

相同。


"我知道Arial首先出现..."

在一般情况下,这当然是不正确的。我的意思是,您不能指望所有客户都是如此。

您可能一直在想,默认情况下,Arial在Windows 7上的某些区域设置中将是首选。但是,对于Linux并非如此。即使对于所有Windows用户,这也不一定是正确的,这取决于他们如何配置。您不可能知道客户端将使用哪种字体。如果您对客户有很多了解,可以做出一些合理的猜测...但是您必须指定有关希望客户的详细信息。

但是您认为sans-serif是万能的是正确的。通常将其放在列表的末尾。一开始我还没看过。在其后列出更多内容是没有意义的。


正如您似乎怀疑的那样,

就像其他答案所说,sans-serif, arial之类的列表通常是基于误解。但是情况更复杂。

根据CSS 2.1规范,所有五个通用字体系列都定义为存在于所有CSS实现中(它们不必映射到五个不同的实际字体)。但是,在我看来,我的Firefox 10违反了此规则:它忽略了名称fantasy,因此font-family: fantasy, xxx导致使用了xxx

一个更基本的问题是,规范要求字体必须按每个字符进行选择,现代浏览器通常会实现此目的。因此,例如,即使在遵循标准的实现中,如果系统上可用该特殊字体,则以下操作通常会使通用名称后列出的字体用于特殊字符:

1
2
3
4
5
6
<style>
p.foo {  font-family: sans-serif, Arial Unicode MS; }
p.bar {  font-family: sans-serif, Lucida Sans Unicode; }
</style>
<p class=foo>Special:  
<p class=bar>Special:

如果与通用名称sans-serif相对应的字体包含上标四个字符(a?')U 2074,则该字体将用于此字体,当然,这两个段落没有呈现差异。但这可能不会。该字体可能是Arial,Helvetica或其他一些带有相对较小字符库的sans serif字体。这意味着浏览器将使用特殊字符使用font-family列表的其余部分。

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