如何应用后备字体？答案

【问题标题】：How to apply a fallback font?如何应用后备字体？
【发布时间】：2017-06-05 12:31:58
【问题描述】：

body {
font-family: 'Ubuntu', sans-serif;
}

body {
font-family: sans-serif; 
}

这是我现在的 CSS。我已经读过，如果您将后备字体放在第二位，它只会在您的第一个字体不起作用的设备上使用。

但是，在我的笔记本电脑上，它选择显示后备字体（当后备超出我的 CSS 时，它会读取第一个字体）。如何在不破坏页面的情况下应用后备字体？

【问题讨论】：

重要的技术细节：您没有在您的第一个 body 块中有两种字体。你有一种字体，Ubuntu（它不需要引号，因为它的名称中没有非字母数字字符），并且你有一个通用字体类。 “sans-serif”不是字体，它是一个特殊的关键字，告诉浏览器“你知道吗？选择 any 设置了 sans-serif 类别位的字体，我什至不在乎一个你选择”。也就是说，看看你的代码，然后问自己“当我设置 font-family 然后我再次设置它时会发生什么”。
查看此线程的已接受答案：stackoverflow.com/questions/4673963/css-fallback-fonts

【解决方案1】：

删除第二个块。

您已经将sans-serif 定义为备用。如果您想添加另一种字体，例如 Arial，只需将其添加到逗号分隔列表中：

body {
    font-family: Ubuntu, Arial, sans-serif;
}

在本例中，如果未安装 Ubuntu，将使用 Arial。如果没有安装 Arial，将使用系统默认的 sans-serif 字体。

您在示例中所做的是覆盖第一个样式块与第二个，这就是为什么总是使用sans-serif 而忽略第一个块。

【讨论】：

【解决方案2】：

您的第二个body/font-familyrule覆盖第一个，因此浏览器永远不会获取第一条规则中列出的字体。

只需删除第二条规则并将备用字体添加到您的第一条规则中，作为字体列表中的第二条 ('Ubuntu', Arial, sans-serif;)。

【讨论】：

【解决方案3】：

那是因为你必须在一行 CSS 中提供它们，像这样：

body {
    font-family: Ubuntu, Arial, 'Your font', sans-serif;
}

决定使用什么字体的是字体的顺序。第二次声明 body 将覆盖第一次。在MDN 阅读有关font-family 的更多信息。

【讨论】：