为什么计算样式显示多个字体系列？

Question

我正在检查https://status.slack.com/上的CSS，发现Chrome中Computed标签中的字体显示为font-family: Lato, sans-serif。

我原本预计，一旦计算出来，我们就会知道哪种字体有效。那么为什么Computed选项卡显示两种字体Lato和sans-serif，而不是当前有效的哪一种？

哪种字体实际上有效？

样式标签：

计算选项卡：

Answer 1

所有font-family都不适用于所有浏览器。因此，它的作用是提供多个字体系列，它从第一个字体开始，如果它不起作用，则表示它转到下一个字体系列。

在您的情况下，如果浏览器不支持Lato，那么它将转到下一个字体系列（即）sans-serif。

所有浏览器都支持最后一种字体，例如sans-serif和serif

有关详情，请查看This

希望有所帮助：）

Answer 2

Font-family使用定义的第一个字体。但是，由于某些字体在客户端计算机上不可用，因此CSS允许客户端使用许多字体来回退＆＃34;上。

例如，font-family: Arial, Calibri, sans-serif;告诉浏览器尽可能使用Arial。如果它不可用，请使用Calibri。如果两者都不可用，请使用浏览器的默认sans-serif字体。

如果要强制浏览器使用字体，可以使用@font-face。

Answer 3

我发现Chrome现在在Computed标签的底部显示“Rendered Fonts”。 过去，it used to show it in the font-family property in the Computed tab

原来Firefox用于支持Inspector选项卡中的Fonts子选项卡，但是 那是removed in Feb 2016。