Question

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

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

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

任何人都可以知道更好的方法吗？非常感谢！

Answer 1

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

在google-chrome-devtools中，“元素”>“计算所得”选项卡显示“渲染字体” 当前检查的元素。 “即使它的名称不在字体系列列表中，也是如此。” whats-that-font，Hackernoon

Firefox：-

Chrome：-

感谢@xuemind进行建议的修改

Answer 2

按顺序排列（如果有）。在您的示例中，它将首先使用Roboto，然后保留下一个（"Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif）作为备份。

Answer 3

嗨，在mozilla firefox上，请使用Font Finder插件。这是最好的插件，它将为您提供应用于您元素的所有样式。

已更新

它按我的预期工作。安装字体查找器后，选择目标文本，然后在上下文菜单中选择[字体查找器>分析选择]（右键单击）。它将显示正在渲染的字体，如以下屏幕截图所示！