我怎样才能确定浏览器实际使用什么字体来渲染一些文本?

我的CSS为整个页面指定了“ font-family: Helvetica, Arial, sans-serif; ”。 它看起来像是在某些地方使用了Verdana。 我希望能够validation这一点。

我试过从我的浏览器复制粘贴到Word中,但它不保留字体。

有什么方法可以确定哪个字体实际上被用于一段文本?

Firebug将给我上面的字体列表[1],但我没有看到一种方法来确定正在使用哪一种字体。

  1. 事实certificate,正在使用错误的列表,这解决了我原来的Verdana问题。 但是,我仍然很好奇,如果有一种方法来识别实际的渲染字体。

每Wilfred休斯的答案 ,Firefox现在支持这个本地。 这篇文章有更多的细节 。

这个答案原来引用了“Font Finder”插件,但只是因为它是从4年前。 旧的答案像这样stream连忘返,而社区无法更新这些事实是Stack Overflowless数剩余的失败之一。

现在,Chrome和Firefox都有内置的工具,但Safari需要您复制一些文本并进行调查。

在Firefox中,页面检查器有一个字体视图 :

Firefox字体视图

这也会告诉你是否下载了字体。

对于Chrome,进入DevTools的“元素”,进入其“计算”选项卡,并一直滚动到“渲染字体”部分:

Chrome网络检查器

上面的截图显示了Unicode文本可能会显示多种字体。 Chrome告诉你六个glyphes(“Pekka”和空间)正在使用“Arial”,而一个(“웃”)正在使用“Apple SD Gothic Neo”:

Arial – 本地文件(6个字形)
Apple SD Gothic Neo – 本地文件(1字形)

实际的CSS定义如下:

 font-family: Arial,"Helvetica Neue",Helvetica,sans-serif 

但是这些字体通常不包含许多特殊字符。 由于字体信息对HTML元素起作用,元素中的Unicode文本实际上可以使用多种字体,所以它也显示多种字体。 如果有疑问,只需双击HTML窗格中的文本,即可摆脱不感兴趣的文本。然后,再次select周围的元素时,只会看到一个选项。 在这种情况下,它会告诉你,两个浏览器使用“苹果SD哥特式新经常”为“웃”字符。

不幸的是,同一台机器上的不同浏览器(甚至是单个浏览器的不同版本)可能会使用不同的字体,这是由于浏览器支持/首选的字体types。 例如,在Mac上,Safari可能更喜欢Apple Advanced Technology,而Firefox则支持Microsoft OpenType(在Mac上安装Microsoft Office后可能会产生阿拉伯语的问题 )。 或者对于上面屏幕截图中的“웃”字符,现在我的Mac上的Chrome和Firefox更喜欢“Apple SD Gothic Neo”(OpenType PostScript),而老版本的Firefox则使用“AppleGothic Regular”(这是一种TrueType字体) 。

对于没有类似字体视图的浏览器,只需将文本片段复制并粘贴到某个文字处理器或富文本编辑器中,select一些特定文本,然后查看某个字体下拉列表中显示哪个名称。 在我的Mac上,从Firefox粘贴时(Firefox的“Apple SD Gothic Neo”在粘贴时转换为“AppleMyungjo”),这不起作用,但适用于Safari和Chrome:

将文本从浏览器粘贴到富文本编辑器中

WhatFont是一个Chrome扩展,它会告诉你具体哪个字体被加载。

Firefox 22+会显示当前正在使用哪种字体 ,而不需要任何扩展。

对于当前版本的Firefox(v7以后),有一个名为“fontinfo”的插件,将报告使用的实际字体(而不是CSS font-family属性说的),同时考虑到浏览器回退到一个不同的字体,因为请求的字体家族不可用或不支持文本中使用的字符。

您可以尝试使用Firebug for Firefox检查特定的部分。 它应该给你所有的确切属性。

jeremy提到的“FontFinder”插件在这里似乎不起作用,无论实际呈现的字体是什么(Linux上的Firefox 4.0rc1),都会给出CSS列表的第一个字体。 不过,下面的插件看起来像是给你“正确”的字体。

上下文字体

基于Lalit Patel的文本测量方法和脚本,我已经创build了小书签 ,可以猜测正在用于当前选定文本的字体(如果没有select任何内容,则为body )。 这似乎工作得很好,我弄清楚使用堆栈中的哪一种字体! (但它不能告诉你什么是sans-serif实际上映射到)。

把它们抓在这里: https : //alanhogan.com/bookmarklets#font-stack-full

源代码在GitHub上 。

另请参阅: 此CodePen ,它使用大部分相同的代码。 尝试通过select不同的段落,并观看表/猜测更新!