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

假设我有以下 CSS

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

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

编辑: 戴夫(在对问题的评论中)指出了一个类似的问题。我特别想知道 Chrome 的情况。另一个问题中的许多答案都建议使用扩展，但是，是否有一种本地化的方法来单独使用开发工具来确定这些信息？

编辑2013年9月: Chrome 团队刚刚宣布，字体家族检查功能现在可以在 Chrome Canary 的最新版本中使用(Twitter 链接包含更多信息的图片)。在接下来的几个星期里，这将通过开发 > 测试版 > 稳定版逐渐传播开来——这是个好消息！

28037 次浏览
小开

您的“不存在的 Sans”可以在您的 css 中用@font-face 呈现。 Http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

我不知道检测字体渲染的方法，所以严格来说我没有回答你的问题。我确实发现了这样一个 http://webdesignerwall.com/tutorials/css3-font-face-design-guide : 这是一个名为 Modern izr 的 javascript，它可以确保如果浏览器不支持@font-face，那么它将加载后备字体，如 Arial 和 Helvetica。

小开

如果你不想使用一个插件，有一个书签小工具会告诉你这个(一旦激活，你悬停在文本上方) :

Http://chengyinliu.com/whatfont.html

小开

我有点晚了，但我刚刚发现了一个非常简单的方法来调试你的浏览器正在使用的字体。

在 Chrome Web 检视器中，转到元素面板 CSS 窗格中的字体堆栈。然后，从堆栈顶部开始，更改字体名称(我随机添加字母) ，同时密切关注有问题的文本。当您更改正在使用的字体时，您将看到文本在返回到堆栈中的下一个字体时更改了字体。

我假设在大多数开发工具中都可能出现类似的情况

好了

小开

在谷歌浏览器的“元素”标签下的“计算”下的 devtools:

Magic paper roses hello kitty


提交答案