【发布时间】：2016-10-12 03:51:54
【问题描述】：
我正在检查 https://status.slack.com/ 上的 CSS，并注意到 Chrome 中“计算”选项卡中的字体显示为 font-family: Lato, sans-serif。
我原以为一旦计算，我们就会知道哪种字体有效。那么，为什么 Computed 选项卡会显示两种字体 Lato 和 sans-serif，而不是当前有效的字体？
哪种字体实际生效？
样式标签：
计算选项卡：
【问题讨论】：
【发布时间】：2016-10-12 03:51:54
【问题描述】：
并非所有字体系列都适用于所有浏览器。所以，它所做的是提供多个字体系列，它从第一个字体开始，如果它不起作用，则意味着它会进入下一个字体系列。
在您的情况下，如果浏览器不支持Lato，那么它将转到下一个字体系列（即）sans-serif。
最后一种字体很常见，所有浏览器都支持，如sans-serif 和serif
更多参考，请查看This
希望对你有帮助:)
【讨论】：
-
所以“计算”并不意味着“当前有效的字体”？如何确定当前有效的字体？
-
其实，“computed”只是当前使用的字体。让我们让它变得简单。 --------- 现在您的站点字体仅在“Lato”字体系列中，但如果您当前的浏览器不支持它，那么它将跳转到“sans-serif”。它就像一个备份，如果指定的字体不支持，它会跳转到下一个默认字体系列。
-
是的，我了解字体后备，但是这两种字体中的哪一种是当前应用的字体？
-
那么在我的问题示例中，最终呈现的是哪种字体？拉托语还是无衬线体？
字体系列使用第一个定义的字体。但是，由于某些字体在客户端的计算机上不可用，CSS 允许客户端“回退”使用许多字体。
例如，font-family: Arial, Calibri, sans-serif; 告诉浏览器尽可能使用 Arial。如果它不可用，请使用 Calibri。如果两者都不可用，请使用浏览器的默认无衬线字体。
如果你想强制浏览器有字体，你可以使用@font-face。
【讨论】：
-
那么在我的问题的示例中，最终呈现的是哪种字体？拉托语还是无衬线体？
-
在这种情况下，Lato 如果用户的计算机支持它，因为它选择了第一个字体。
我发现 Chrome 现在在“计算”选项卡的底部显示“渲染字体”。 过去，it used to show it in the font-family property in the Computed tab
原来 Firefox 曾经支持 Inspector 选项卡中的 Fonts 子选项卡，但是 那是removed in Feb 2016。
【讨论】：
-
即使是浏览器供应商也无法确定“计算值”是什么意思。难怪你把它们弄混了。在 CSS 中，计算的值应该是（并且是）整个字体堆栈。毕竟，这就是字体堆栈的全部意义——在整个系列不可用或系列不为某些代码点提供字形的情况下提供后备； CSS 在计算值时不知道哪些字体资源可用。它与“最终呈现哪种字体”或“最终呈现哪种字体（复数）”完全不同。
-
字体面板尚未从 Firefox 中移除；它只是隐藏在 about:config 标志后面，当你重新启用它时仍然有效。
-
啊。所以 Computed 值表示在所有级联完成后确定的最终 CSS 属性值。它不是指最终渲染的字体。知道了！ （也许这就是为什么 Chrome 将它移到 Compted 选项卡底部的单独部分 - 以避免最终渲染的字体与 Computed 值混淆）