Css 如何确定浏览器实际用于呈现某些文本的字体？

我的CSS为整个页面指定“

字体系列：Helvetica、Arial、sans serif；

”。看起来Verdana在某些部件上被使用了。我希望能够验证这一点

我试着从我的浏览器复制粘贴到Word中，但它没有保留字体

是否有某种方法可以确定某段文字实际使用的字体

Firebug会给我上面[1]的字体列表，但我看不到一种确定使用哪种字体的方法

结果是使用了错误的列表，解决了我原来的Verdana问题。但我仍然很好奇是否有办法识别实际的渲染字体

---

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

根据，Firefox现在本机支持此功能

这个最初的答案引用了“字体查找器”插件，但只是因为它是4年前的。旧答案像这样挥之不去，社区无法更新它们，这是堆栈溢出剩下的几个失败之一

jeremy提到的“FontFinder”插件在这里似乎不起作用，它给出了CSS列表中的第一种字体，而不管实际呈现的字体是什么（Linux上的Firefox 4.0rc1）。然而，下面的插件似乎给了你“正确”的字体

---

是一个Chrome扩展，它将明确告诉您正在加载字体堆栈中的字体。

对于当前版本的Firefox（从v7开始），有一个名为“fontinfo”的插件，它将报告实际使用的字体（而不是CSS字体系列属性所述的字体），考虑到由于请求的字体系列不可用或不支持文本中使用的字符而导致浏览器返回到不同字体的情况。

，没有任何扩展。

现在Chrome和Firefox都有内置的工具，但Safari需要您复制一些文本并进行调查

首先，选择一些文本。在Firefox中，页面检查器具有：

这还将告诉您是否下载了字体，以及使用了哪种样式，如常规、超轻、斜体、粗体斜体和全部

对于Chrome，进入DevTools的“Elements”，进入其“Computed”选项卡，一直向下滚动到名为“Rendered font”的部分。与Firefox不同，这只显示基本字体名称，而不是它可能使用的任何特定样式：

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

Arial-本地文件（6个字形）
苹果SD哥特式Neo-本地文件（1字形）

实际的CSS定义：

字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线

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

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

对于没有类似字体视图的浏览器，只需将文本片段复制并粘贴到某个文字处理器或富文本编辑器中，选择某个特定文本，然后查看某个字体下拉列表中显示的名称。在我的Mac电脑上，从Firefox粘贴时，此操作不起作用（用于웃Firefox的“Apple SD哥特式Neo”在粘贴时转换为“AppleMyungjo”），但在Safari和Chrome上效果良好：

---

基于Lalit Patel的文本测量方法和脚本，我创建了一个可以猜测当前所选文本使用的字体（或

正文，如果未选择任何内容）。对于我来说，它似乎可以很好地确定堆栈中使用的字体！（但它无法告诉您无衬线
实际映射到什么。）

在这里抓住他们：

消息来源是

另请参见：，它使用的代码基本相同。请通过选择不同的段落并观看表格/猜测更新来尝试一下。
无需使用任何外部浏览器插件。
为了检查Google Chrome网站上真正使用的字体，您需要：


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

您可以尝试使用来识别网站或网页上使用的不同字体。这是一个免费的chrome扩展，还可以让您预览自己键入的文本，并使用网页上识别的不同字体样式。它非常方便易用，而且是免费的，因此这是一个主要优点。希望这对我仍然有帮助列表，不是它正在使用的特定列表…但是在第二次检查中，Verdana不知何故进入了字体系列列表，这可能是我最初问题的原因。