如何知道浏览器从CSS font-family列表中使用哪种字体？

Posted 2021-03-31

在Web开发中，首选的字体列表放在CSS的font-family中，如下例所示。

font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

我想知道浏览器选择哪种字体来显示内容。我知道我可以在浏览器开发者工具中逐个手动修改font-family中的字体，并观察显示内容的变化以识别浏览器使用的字体。但它太笨拙，需要非常敏锐的眼睛T_T。

谁能知道更好的方法？非常感谢！

答案

在firefox-developer-tools中，Inspector> Fonts选项卡显示当前检查元素的“使用的字体”。 Edit fonts MDN

在google-chrome-devtools中，Elements> Computed选项卡显示当前检查元素的“渲染字体”。 “即使它的名字不在font-family列表中。” whats-that-font，Hackernoon

Firefox： -

Chrome： -

感谢@xuemind的建议编辑

另一答案

如果可用的话。在你的例子中，它将首先用于Roboto并保留下一个（"Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif）作为备份，如果它可用的话。

另一答案

嗨on Mozilla firefox使用Font Finder插件。这是最好的插件，它将为你提供适用于你元素的所有风格。

更新

它像我期望的那样工作。安装Font Finder后，选择目标文本，然后在上下文菜单中选择[Font Finder> Analyze Selection]（右键单击）。它将显示正在呈现的字体如下截图！