引用的字体“无衬线”在 CSS 中无法正常工作答案

【问题标题】：Quoted font 'sans-serif' not working properly in CSS引用的字体“无衬线”在 CSS 中无法正常工作
【发布时间】：2016-11-24 19:11:18
【问题描述】：

我正在编写一个小型静态站点（HTML 和 CSS），偶然发现了 font-family 属性中的一个行为，我不明白。我喜欢写出与漂亮和干净的外观一致的代码，这就是为什么总是在 CSS 中引用字体。

据我了解，CSS2.2 specification 正确，引用字体是允许的：

字体系列名称必须以字符串形式引用，或者不带引号作为一个或多个标识符的序列。

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

.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 却无效？

【问题讨论】：

【解决方案1】：

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

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

family-name - 字体系列的名称，如“times”、“courier”、“arial”等。

generic-family - 通用系列的名称，例如“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”。

【讨论】：