html - 赋予多个字体家族名称的意义是什么

Question

对于一个元素，我下载了一个模板。在其 style.css 字体系列中定义为

body {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}

arial, sans-serif, Helvetica Neue 是不同的字体系列，那么为什么 css 中的字体系列定义如上。

Answer 1

并非所有浏览器都支持所有字体。

因此，给多个字体系列选择浏览器支持的字体，从第一个字体开始。如果支持第一种字体，则使用它，否则检查是否支持下一种字体，依此类推。使用支持的最左边的字体。

font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

在这种情况下，并非所有浏览器都支持 Lato。因此，检查下一个字体 Helvetica Neue。

您还会注意到最后一种字体很常见，在本例中，所有浏览器 Arial 和 sans-serif 都支持这些字体。

来自 MDN

The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a @font-face at-rule.

Web authors should always add at least one generic family in a font-family list, since there's no guarantee that a specific font is installed on the computer or can be downloaded using a @font-face at-rule. The generic family lets the browser select an acceptable fallback font when needed.