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

【问题标题】：How to know which font is used by browser from CSS font-family list?如何从 CSS font-family 列表中知道浏览器使用哪种字体？
【发布时间】：2019-08-07 10:21:04
【问题描述】：

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

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

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

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

【问题讨论】：

How can I determine what font a browser is actually using to render some text?的可能重复

标签： css webfonts font-family

【解决方案1】：

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

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

火狐：-

铬：-

感谢@xuemind 提出的编辑建议

【讨论】：

是的！ Firefox 中如此出色的功能。但是 Vikas Patel 在之前的回答中给出了另一个建议。是否可以接受 2 个答案？
在 Firefox 中，开发人员工具的第三个窗格位于窗口右侧。我调整了其他两个窗格的大小并找到了字体选项卡。

【解决方案2】：

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

【讨论】：

感谢您的回答。那么，如果我不知道操作系统中安装了什么样的字体，我怎么知道浏览器最终在字体系列列表中选择了哪种字体呢？

【解决方案3】：

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

更新

它按我的预期工作。 Font Finder 安装后，选择目标文本并在上下文菜单中选择 [Font Finder>Analyze Selection]（右键单击）。它将显示 Font Being Rendered 如下截图！

【讨论】：