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

Question

我的CSS为整个页面指定了“font-family: Helvetica, Arial, sans-serif;”。看起来Verdana在某些部分被使用了。我希望能够验证这一点。

我尝试从浏览器复制并粘贴到Word中，但它不保留字体。

有没有办法确定哪个字体实际用于一段文字？

Firebug会给我上面的字体列表[1]，但是我没有办法确定使用哪种字体。

1. 事实证明正在使用错误的列表，这解决了我原来的Verdana问题。但是我仍然很好奇是否有办法识别实际的渲染字体。

Answer 1

如今Chrome和Firefox都有内置工具，但Safari需要您复制一些文字并进行调查。

在Firefox中，Page Inspector有一个Fonts view：

这也会告诉您是否下载了字体。

对于Chrome，请转到DevTools的“元素”，转到“计算”标签，然后一直向下滚动到“渲染字体”部分：

上面的屏幕截图显示可能会为Unicode文本显示多种字体。 Chrome告诉你6个glyphes（“Pekka”和空格）正在使用“Arial”，而一个（“웃”）正在使用“Apple SD Gothic Neo”：

  

Arial - 本地文件（6个字形）
   Apple SD Gothic Neo - 本地文件（1个字形）

实际的CSS定义：

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif

但这些字体通常不包含许多特殊字符。由于字体信息适用于每个HTML元素，其中元素中的Unicode文本实际上可以使用多种字体，因此它也显示多种字体。如有疑问，只需双击HTML窗格中的文本即可删除您不感兴趣的文本。然后，再次选择周围的元素时，您只会看到一个选项。在这种情况下，它会告诉你两个浏览器都使用“Apple SD Gothic Neo Regular”作为“웃”字符。

不幸的是，由于浏览器支持/首选的字体类型，同一台计算机上的不同浏览器（甚至是单个浏览器的不同版本）可能会使用不同的字体。例如，在Mac上，Safari可能更喜欢Apple Advanced Technology，而Firefox支持Microsoft OpenType（在Mac上安装Microsoft Office后可能会产生problems for Arabic）。或者对于上面屏幕截图中的“웃”字符，我的Mac上的Chrome和Firefox现在更喜欢“Apple SD Gothic Neo”（OpenType PostScript），但旧版本的Firefox使用“AppleGothic Regular”代替（这是一种TrueType字体）

对于没有类似字体视图的浏览器，只需复制＆amp;将文本片段粘贴到某些文字处理器或富文本编辑器中，选择一些特定文本，并查看某些字体下拉列表中显示的名称。在我的Mac上，当从Firefox粘贴时，这不起作用（“웃”Firefox的“Apple SD Gothic Neo”在粘贴时转换为“AppleMyungjo”），但适用于Safari和Chrome：

Answer 2

Per Wilfred Hughes' answer，Firefox现在支持此功能。 This article has more details。

这个答案原文引用了“Font Finder”插件，但仅仅因为它来自4年前。旧答案如此流传，社区无法更新这一事实是Stack Overflow为数不多的失败之一。

Answer 3

WhatFont是一个Chrome扩展程序，它会告诉您具体加载字体堆栈中的哪种字体。

Answer 4

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

Answer 5

对于当前版本的Firefox（自v7起），有一个名为“fontinfo”的附加组件，它将报告所使用的实际字体（而不是CSS font-family属性所说的内容），并考虑到浏览器的情况由于请求的字体系列不可用或不支持文本中使用的字符，因此会回退到不同的字体。

Answer 6

您可以尝试使用Firebug for Firefox检查该特定部分。它应该为您提供所有确切的属性。

Answer 7

jeremy提到的“FontFinder”插件似乎无法在这里工作，无论实际呈现的字体是什么，都会给出CSS列表的第一个字体（Linux上的Firefox 4.0rc1）。但是，以下插件会为您提供“正确”的字体。

Context Font

Answer 8

基于Lalit Patel的文本测量方法和脚本，我创建了bookmarklets，可以猜出当前所选文本（或body）使用的字体，如果没有，选择）。对于我来说，弄清楚堆栈中使用了哪种字体似乎非常有效！ （但它无法告诉你sans-serif实际映射到的是什么。）

抓住他们： https://alanhogan.com/bookmarklets#font-stack-full

来源为on GitHub。

另请参阅：this CodePen，它主要使用相同的代码。尝试选择不同的段落并观看表格/猜测更新！

Answer 9

无需为此使用任何外部浏览器插件。 为了在谷歌浏览器中检查网站上真正使用的是哪种字体，您需要：

• 打开开发者工具（右键单击网站并选择检查）
• 在“元素”选项卡中选择所需的对象
• 选择“计算”选项卡，在底部窗格中您将看到“渲染字体”：

Answer 10

您可以尝试使用 Find Website Used Fonts 来识别网站或网页上使用的不同字体。它是一个免费的 chrome 扩展程序，还可以让您以识别出的不同字体样式预览自己输入的文本一个网页。超级方便且易于使用，它也是免费的，所以这是一个主要优点。希望这有帮助?