如何从CSS字体列表中知道浏览器使用的字体？

Question

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

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

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

有人知道更好的方法吗？非常感谢！

- xuemind

---

可能是如何确定浏览器实际使用哪种字体来呈现某些文本？的重复问题。 - Arjan

Answer 1

在 firefox-developer-tools 中，Inspector > Fonts 标签显示当前所检查元素使用的“字体”。请参阅Edit fonts MDN。

在 google-chrome-devtools 中，Elements > Computed 标签显示当前所检查元素的“已呈现字体”，即使其名称未在字体族列表中。请参阅whats-that-font和Hackernoon。

Firefox： Chrome： 感谢 @xuemind 的建议编辑。

- Pradeepal Sudeshana

---

是的，它是！Firefox中如此棒的功能。但是Vikas Patel在之前的回答中提出了另一个建议。是否可能接受2个答案？ - xuemind

在Firefox中，开发者工具的第三个窗格位于窗口的右侧。我调整了其他两个窗格的大小，并找到了字体选项卡。 - Jimmy Carter

Answer 2

如果可用，将使用最初的回答。在您的示例中，首选Roboto并保留下一个（"Helvetica Neue Light"、"Helvetica Neue"、Helvetica、Arial、"Lucida Grande"、sans-serif）作为备用，如果它可用。

- Marcel

---

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

Answer 3

你可以在Mozilla Firefox浏览器上使用Font Finder插件。

这是最好的插件，它将为您提供应用于元素的所有样式。

更新

它的使用效果与我期望的一样。安装了Font Finder之后，选择目标文本并在上下文菜单（右键单击）中选择[Font Finder>Analyze Selection]。它将显示正在呈现的字体，如以下屏幕截图所示！

- Vikas Patel