CSS多个字体系列？

Question

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

当出现像上面所示的多个csv字体族时，这意味着什么？

- veta

Answer 1

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

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

以您的示例为例：

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

Arial将会回退到Verdana，如果没有其他字体可用，则会再次回退到sans-serif

最佳实践：

从您想要的字体开始，并始终以通用字体族结束，以便在没有其他字体可用时，让浏览器选择通用字体族中的类似字体。

有趣的是，字体系列可以基于字符进行选择：

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

- Pavan Ravipati

---

当您使用非系统字体（例如，用户必须下载才能在您的网站上看到它显示的字体）时，指定备用字体非常有用：如果指定了备用字体，则用户在远程字体正在其设备上下载时将看到其。如果没有指定备用字体，则用户将什么也看不到。 - Nathan Peixoto

谢谢，这很有道理。所以“sans-serif”是一个通用字体族？这意味着浏览器会选择适当的默认无衬线字体？ - veta

假设我们的页面中有Arial字体和“Hiragino Sans GB”字体。如果一句话包含中英文字符，浏览器将使用Arial来呈现英文字符，但使用“Hiragino Sans GB”来呈现中文字符。浏览器将逐个字符检查正确的字体。 - Ricky Jiao

Answer 2

它们是备选项。 "sans-serif" 是一种通用字体族，意味着浏览器将选择一个默认的也是 sans-serif 字体。

- user3831078