如何判断Chrome使用哪种字体?

问题描述:

想象一下,我有以下CSS如何判断Chrome使用哪种字体?

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

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

编辑:戴夫(在对问题的评论中)指出了一个类似的问题。我在这里专门询问了Chrome。然而,在另一个问题中的许多答案表明扩展是可以的,是否有一种独自使用开发工具来确定这些信息的方式? Chrome团队刚刚宣布现在可以在latest builds of Chrome Canary(Twitter链接中包含更多信息的图片)中提供字体系列检测功能。这应该在接下来的几周内通过dev> beta> stable逐渐下降 - 好消息!

+0

感谢戴夫,我尝试搜索,但找不到任何东西。没有使用扩展名的方式来确定使用的字体吗? – 2012-02-03 15:00:57

您的'不存在的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等后备字体。

如果你不想使用插件有一个书签,将告诉你这(一旦被激活,你将鼠标悬停在上述文本):

http://chengyinliu.com/whatfont.html

+0

好主意,但我只能在他的示例页面上使用它。 – Dave 2012-02-03 15:05:22

+0

不错的建议,我喜欢它既可以作为插件也可以作为书签使用。我更喜欢使用开发工具的解决方案,但这是迄今为止最好的。 – 2012-02-03 15:09:12

我有点晚派对,但我刚刚发现了一个非常简单的方法来调试您的浏览器正在使用哪种字体。

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

我认为类似的东西可能在大多数开发工具

+0

这是一个好主意,它不需要使用扩展名或书签,谢谢。 – 2012-06-30 19:01:33

+0

我实际上从您的问题 – Iolo 2012-07-13 09:42:00

在谷歌浏览器devtools中的 '元素' 选项卡,在 '计算':

Magic paper roses hello kitty

+0

中的“不存在的无关”中获得了想法,感谢菠萝,但请参阅编辑上个月我提出的问题。 – 2013-10-24 19:49:47

+15

在Chrome 34.0.1847.116中,渲染的字体在底部的“计算”选项卡中列出。该部分被称为“渲染字体”。你也必须选择一个具有文本的特定元素,否则它不会显示。 – JMS10 2014-04-16 15:44:40

+0

字体名称后有什么意思是“69个字形”? – agad 2014-09-19 12:08:19