如何判断Chrome使用的是哪种字体？

Question

想象一下，我有以下CSS

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

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

编辑： Dave（在问题的评论中）指出了一个类似的问题。我在这里专门询问Chrome。然而，另一个问题中的许多答案都表明扩展是可以的;是否存在使用Dev Tools单独确定此信息的本地方法？

2013年9月编辑：Chrome团队刚刚宣布，latest builds of Chrome Canary现已提供字体系列检查（Twitter链接包含更多信息的图片）。这应该通过dev＆gt;进行。 beta＆gt;在接下来的几周内保持稳定 - 好消息！

Answer 1

在“元素”标签中的Google Chrome devtools中，在“已计算”下：

Answer 2

我参加派对有点晚了，但我刚刚发现了一种调试浏览器使用的字体的简单方法。

在Chrome网页检查器中，转到“元素面板”的“CSS”面板中的字体堆栈。然后，从堆栈顶部开始，更改字体名称（我添加随机字母），同时密切关注相关文本。当您更改正在使用的文本时，您将看到文本更改字体，因为它会回退到堆栈中的下一个字体。

我假设在大多数开发工具中都有类似的东西

VOILÀ

Answer 3

如果您不想使用插件，可以使用一个书签来告诉您（一旦激活，您将鼠标悬停在所述文本上）：

http://chengyinliu.com/whatfont.html

Answer 4

您的'不存在的Sans'可以在您的CSS中使用@ font-face呈现。 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。