html - 引用的字体 'sans-serif' 在 CSS 中无法正常工作

Question

我正在编写一个小型静态网站(HTML 和 CSS)，并偶然发现了属性 font-family 中的行为，但我不明白该行为。我喜欢以漂亮、干净的外观编写代码，这就是为什么总是在 CSS 中引用字体。

据我了解CSS2.2 specification允许使用正确的、带引号的字体:

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers.

不幸的是，它在我的情况下无法正常工作。我在下面附上了一个例子。

.test1
{
    font-family: 'sans-serif';
}

.test2
{
    font-family: 'arial';
}

.test3
{
    font-family: sans-serif;
}

<h1 class="test1">Test</h1>
<h1 class="test2">Test</h1>
<h1 class="test3">Test</h1>

我使用 Google Chrome 54.0.2840.99 和 Internet Explorer 11.0.9600.18450 测试了该属性。为什么引用的字体对 arial 有效，但对 sans-serif 无效？

Answer 1

Sans-serif 不是字体名称，而是字体类型... 为了使字体工作，您必须至少输入字体名称! 字体名称为必填项。 例如

.myclass{font-family: 'myFontName', sans-serif;}

• family-name - The name of a font-family, like "times", "courier", "arial", etc.
• generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

Source