Chrome正在使用哪个字体，我该如何判断？

Question

假设我有以下CSS：

font-family: 'Non-existant Sans', Arial, sans-serif;

假设系统中未安装“Non-existant Sans”字体，则浏览器将使用Arial字体。在Chrome中，有没有办法找出正在呈现的字体？

编辑：Dave（在问题的评论中）指出了一个类似的问题。我在这里特别问的是Chrome。其他问题中的许多答案都提供了可以使用的扩展程序，但是，仅使用开发工具本身是否有确定此信息的本地方法？

编辑Sept 2013：Chrome团队刚刚宣布，在Chrome Canary的最新版本中提供了字体系列检查功能（Twitter链接包含更多信息的图像）。这应该会逐渐通过dev>beta>stable传播几个星期-好消息！

- Liam Newmarch

Answer 1

在Google Chrome的开发者工具中，在“元素”选项卡下的“计算样式”中：

- Jürgen Paul

---

在Chrome 34.0.1847.116中，呈现的字体在“计算”选项卡的底部列出。该部分称为“呈现字体”。此外，您必须选择具有文本的特定元素，否则它将不会显示。 - iheartcsharp

字体名称后面的“69个字形”是什么意思？ - agad

似乎意味着在所选元素内显示了许多字形（即字母、数字、空格 - 即字符）。 - Geoff

@Geoff 好的，谢谢。 - agad

请注意，如果所涉及的文本位于输入元素内部，则还需要启用影子 DOM 视图（请参见开发工具设置）。 - inopinatus

@agad（和以后的读者），这些数字告诉您当前文本中每个字体在字体堆栈中提供多少字形。 '字形'是表示特定字符的具体可见符号（因此，如果您在三种不同的字体中都有字母'B'，它们都是相同的字符，但它们使用三种不同的字形）。字体回退按每个字符基础计算，因此如果默认字体没有当前字符的字形，它会在每个后续的回退字体中寻找一个字形。这意味着给定的文本元素可以偷偷地同时使用来自多个字体的字形。 - endemic

Answer 2

我有点晚了，但我刚刚发现了一种非常简单的方法来调试浏览器使用的字体。在Chrome Web Inspector中，转到元素面板中CSS窗格中的字体堆栈。然后，从堆栈的顶部开始，更改字体的名称（我添加随机字母），同时注意所涉及的文本。当您更改正在使用的字体时，您将看到文本更改字体，因为它向下回退到堆栈中的下一个字体。我认为大多数开发工具都可以进行类似的操作。Voilá。

- Iolo

---

我实际上是从你问题中的“'Non-existant Sans'”得到了灵感。 - Iolo

Answer 3

如果您不想使用插件，可以使用书签工具，在悬停在文本上时会告诉您这一点。

http://chengyinliu.com/whatfont.html

- Seb Ashton

---

很酷的想法，但我只能让它在他的示例页面上运行。 - Dave

Answer 4

你可以在CSS中使用@font-face来渲染你的“不存在的Sans”字体。 http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

我不知道如何检测字体渲染，所以我并没有技术上回答你的问题。我找到了这个网站：http://webdesignerwall.com/tutorials/css3-font-face-design-guide 它是一个名为Modernizr的JavaScript库，可以确保如果浏览器不支持@font-face，则会加载备用字体，例如Arial和Helvetica。

- Noah Rainey