问如何确定浏览器实际使用哪种字体来呈现某些文本？

EN

每个Wilfred Hughes' answer，火狐现在都支持这一点。This article has more details。

这个答案最初引用了"Font Finder“插件，但仅仅是因为它来自4年前。事实上，旧的答案像这样挥之不去，社区无法更新它们，这是Stack Overflow为数不多的剩余失败之一。

多年来，Firefox和Chrome都有内置的工具来显示所有细节，但2021年10月的Safari15.x仍然需要你复制一些文本来调查这一点。

Firefox

在Firefox中，右键单击某些文本并选择检查元素后显示的页面检查器具有一个Fonts view

​

​

这也将告诉您使用的样式，如常规，ExtraLight，斜体，BoldItalic和所有。

如上面的截图所示：

.SF NS

系统字体

SD哥特式新

Apple SD哥特式Neo Regular

因此，您可以看到正在查看的元素中使用的所有字体，即使只选择了一个字形。只需在检查器中悬停单个字体名称，即可突出显示使用该特定字体的字形。悬停“苹果SD哥特式Neo Regular”恰好突出了"웃"：

​

​

悬停“系统字体”会让我：

​

​

对于网页字体，Firefox似乎会显示CSS中的名称以及下载字体中的详细信息。在它的"All Fonts on Page“部分，它还会告诉你字体是从哪里下载的。

对我来说，在2021年10月，Firefox有最好的选择来确定字体。但是：并不是所有的浏览器都使用相同的字体，所以请继续阅读！

铬

对于Chrome，进入DevTools的“元素”，进入“计算”标签，然后向下滚动到中的“渲染字体”部分。与Firefox不同，它只显示基本字体名称，而不显示它可能使用的任何特定样式：

​

​

对于网页字体，Chrome只会显示“网络资源”( Firefox会显示更多细节)。

与Firefox一样，您可以看到正在查看的元素中使用的所有字体，即使只选择了一个字形。Chrome会提供所选元素中使用特定字体的字形的计数，但不支持悬停以突出显示使用特定字体的字形：

.SF NS -本地文件(192个字形)

.Apple SD哥特式NeoI -本地文件(1字形)

Safari

2021年10月的Safari 15终于引入了“字体”标签，但它的输出相当有限。对于“身份”，它通常显示次要信息，如“仅限TN网络使用”(其中Firefox将其显示为注释，如"Interstate Condensed，TN web use only")。或者什么都不显示。但是，最后，这是一个开始：

​

​

这只适用于元素。对于文本节点(如单个字符)，不会显示字体选项卡。

对于上面使用的相同示例，Safari甚至没有表明使用了多种字体：

Identity

名称.AppleSystemUIFont

因此，请继续阅读。

其他浏览器(和Safari)

对于Safari和其他没有完整字体视图的浏览器，只需将文本片段复制并粘贴到某个文字处理器或富文本编辑器中，选择一些特定的文本，然后查看哪个名称显示在某个字体下拉列表中。在我的Mac机上，当从火狐粘贴时，这不起作用(火狐的"웃“火狐的”苹果SD哥特式Neo“在粘贴时被转换为"AppleMyungjo”)，但在Safari和Chrome上效果很好：

​

​

单个HTML元素中的多种字体

对于上面的屏幕截图，实际的CSS定义：

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;

但这些字体通常不包含许多特殊字符。由于字体信息适用于每个HTML元素，其中元素中的Unicode文本实际上可以在其子文本节点中使用多种字体，因此开发人员工具也会显示多种字体。如果不确定，可以在Firefox中悬停字体，或者在其他浏览器中双击HTML窗格中的文本，然后删除不感兴趣的文本。然后，当再次选择周围的元素时，您将只看到一个选项。

不同浏览器中的不同字体

不幸的是，由于浏览器支持/首选的字体类型，同一台机器上的不同浏览器(甚至单个浏览器的不同版本)可能使用不同的字体。例如，在Mac上，Safari可能更喜欢Apple Advanced Technology，而Firefox支持微软的OpenType (在Mac上安装Microsoft Office后，可能会生成problems for Arabic )。或者对于上面截图中的“Regular”字符，现在我的Mac上的火狐和Chrome更喜欢“苹果SD哥特式Neo”和".Apple SD哥特式NeoI“(这是OpenType PostScript)，但旧版本的火狐使用的是"AppleGothic웃”(这是TrueType字体)。

file /System/Library/Fonts/AppleSDGothicNeo.ttc 
/System/Library/Fonts/AppleSDGothicNeo.ttc: OpenType font collection data, 2.0, 18 fonts, at 0x60 OpenType Font data, 18 tables, 1st "BASE"

file /System/Library/Fonts/Supplemental/AppleGothic.ttf 
/System/Library/Fonts/Supplemental/AppleGothic.ttf: TrueType Font data, 18 tables, 1st "cmap", 33 names, Macintosh, Copyright ? 1994-2006 Apple Computer, Inc. All rights reserved.AppleGothicRegularAppleGothic Reg

请注意，Chrome (在苹果电脑上)在"NeoI“中显示了一个前导点和尾随的大写字母"i”，这在同一个例子中是Firefox所没有的。在那台Mac上，Font Book显示：

​

​

我还没有调查过这需要什么。

Firefox 22+ will show you which font is currently in use，不带任何扩展名。