logo标签列表

如何应用备用字体？

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

body {
font-family: sans-serif; 
}

这是我的CSS。我了解到如果将备用字体放在第二位，它只会在第一个字体无法使用的设备上使用。 但是，在我的笔记本电脑上，它选择显示备用字体（当备用字体在我的CSS之外时，它确实读取第一个字体）。如何应用备用字体而不会“破坏”我的页面？
1
重要的技术细节：在你的第一个“body”块中，并没有两种字体。你只有一种字体，“Ubuntu”（顺便说一句，它的名称中没有非字母数字字符，所以不需要引号），还有一个通用字体类。“sans-serif”不是一种字体，它是一个特殊的关键词，告诉浏览器：“你知道吗？选择任何具有sans-serif类别位设置的字体，我甚至不在乎你选择哪一个。”也就是说，看看你的代码，然后问自己：“当我设置font-family，然后再次设置它时会发生什么。” - Mike 'Pomax' Kamermans
请查看此主题的被接受答案：https://dev59.com/k2445IYBdhLWcg3w1tmi - Rezoanul Alam Riad
3个回答
9

移除第二个模块。

你已经将 sans-serif 定义为回退字体。如果你想要添加另一个字体，例如 Arial，只需将其加入逗号分隔的列表即可：

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

在这个例子中，如果Ubuntu没有安装，则使用Arial字体。如果Arial未安装，则使用系统默认的无衬线字体。
在您的示例中，您正在使用第二个样式块覆盖第一个样式块，这就是为什么sans-serif始终被使用，并且忽略了第一个块。
1
你的第二个body/font-family规则覆盖了第一个规则，因此浏览器不会获取第一个规则中列出的字体。
只需删除第二个规则并将备用字体添加到第一个规则中，作为字体列表中的第二个（'Ubuntu'，Arial，sans-serif;）。
1
这是因为你需要在一行CSS中提供它们，就像这样：
body {
    font-family: Ubuntu, Arial, 'Your font', sans-serif;
}

字体的顺序决定了使用哪种字体。再次声明body将覆盖第一次声明。请在MDN中了解更多关于font-family的信息。
没有必要引用Ubuntu，因为它里面没有需要引用的字符（显然，“your font”需要引号）。 - Mike 'Pomax' Kamermans
1
@Mike'Pomax'Kamermans 只需从问题中复制/粘贴即可，但是说得好。已更新答案。 - Roy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接