CSS多个字体系列？答案

【问题标题】：CSS multiple font-families?CSS多个字体系列？
【发布时间】：2015-07-16 15:15:15
【问题描述】：

body {
 background-color: silver;
 color: white;
 padding: 20px;
 font-family: Arial, Verdana, sans-serif;
}

有多种csv字体families，如上，是什么意思？

【问题讨论】：

标签： html css fonts

【解决方案1】：

这意味着如果客户端的浏览器没有可用的先前字体，该字体将回退到列出的下一个字体。

通过列出多种字体，即使您列出的第一个字体在他们的浏览器中不可用，您也可以确保客户端能够看到您想要显示的字体。

在你的例子中：

body {
  background-color: silver;
  color: white;
  padding: 20px;
  font-family: Arial, Verdana, sans-serif;
}

Arial 将回退到Verdana，而sans-serif 将回退到sans-serif

最佳实践：

从您想要的字体开始，并始终以通用系列结尾，以让浏览器在通用系列中选择类似的字体（如果没有其他字体可用）。

作为一个有趣的花絮，字体系列在character by character basis 上可能很重要：

font-family 属性指定了一个字体列表，从最高优先级到最低优先级。字体选择不会简单地停留在用户系统上列表中命名的第一个字体上。相反，字体选择是一次一个字符完成的，因此如果可用字体没有可以显示所需字符的字形，则尝试稍后可用的字体。但是，这在 Internet Explorer 6 或更早版本中不起作用。

【讨论】：

当您使用非系统字体时很有用（例如，用户必须下载字体才能在您的网站上看到它）：如果您指定备用字体，用户将看到它在其设备上下载远程字体时。如果不这样做，用户将什么也看不到。
感谢这是有道理的。那么“sans-serif”是一个通用的家族吗？这意味着浏览器将选择适当的默认无衬线字体？
假设，我们的页面中有字体 Arial 和“Hiragino Sans GB”。如果一个句子同时包含中英文字符。浏览器使用 Arial 来渲染英文字符，但是使用“Hiragino Sans GB”来渲染中文。浏览器将逐个检查正确的字体。

【解决方案2】：

它们是备用选项。 “sans-serif”是一个通用系列，意味着浏览器将选择一个默认字体，它也是 sans-serif。

【讨论】：