我如何知道Chrome正在使用哪种字体?

想象一下,我有以下的CSS

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

假设系统中没有安装“不存在的Sans”,Arial将被浏览器使用。 使用Chrome,有什么方法可以找出哪个字体被渲染?

编辑:戴夫(在对这个问题的意见)指出了一个类似的问题。 我在这里专门询问了Chrome。 在另一个问题的许多答案表明扩展是可以的,但是; 有没有一种独自使用开发工具来确定这些信息的方法?

编辑2013年9月: Chrome团队刚刚宣布,现在可以在Chrome Canary的最新版本中使用字体系列检测(Twitter链接包含更多信息的图像)。 这将在接下来的几周内通过dev> beta>稳定下来 – 好消息!

在“元素”标签中的“计算”下的Google Chrome开发工具中:

魔术纸玫瑰你好小猫

我晚了一点,但我刚刚发现了一个非常简单的方法来debugging您的浏览器正在使用的字体。

在Chrome Web Inspector中,转到Elements面板的CSS窗格中的字体堆栈。 然后,从堆栈的顶部开始,改变字体的名称(我添加了随机字母),同时关注所讨论的文本。 当你改变正在使用的那个,你会看到文本改变字体,因为它回落到堆栈中的下一个。

我认为大多数开发工具都有类似的可能性

如果你不想使用一个插件,有一个小书签会告诉你这个(一旦被激活,你就可以hover在上面的文字上):

http://chengyinliu.com/whatfont.html

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