如何应用后备字体？

Question

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

body {
font-family: sans-serif; 
}

这是我的CSS。我已经读过，如果你把你的后备字体放在第二位，那么它只能在你的第一个字体不起作用的设备上使用。

但是，在我的笔记本电脑上，它选择显示后备字体（当后退不在我的CSS时，它会读取第一个字体）。如何在没有它的情况下应用后备字体-ruining- my page？

Answer 1

删除第二个块。

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

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

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

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

Answer 2

那是因为你必须在一行CSS中提供它们，如下所示：

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

这是决定使用哪种字体的字体顺序。第二次说明body将覆盖第一个。在MDN了解font-family的更多信息。

Answer 3

您的第二个body/font-family规则会覆盖第一个规则，因此浏览器无法获取第一个规则中列出的字体。

只需删除第二条规则，然后将后备字体添加到第一条规则中，作为字体列表中的第二条（'Ubuntu', Arial, sans-serif;）。