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



3 Answers

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

在Firefox中,Page Inspector有一个developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/…

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

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

上面的屏幕截图显示可能会显示Unicode文本的多种字体。 Chrome会告诉你6个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窗格中的文本,即可摆脱不感兴趣的文本。然后,再次选择周围的元素时,您只会看到一个选项。 在这种情况下,它会告诉你,两个浏览器都使用“Apple SD Gothic Neo Regular”作为“웃”字符。

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

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

Question

我的CSS为整个页面指定了“ font-family: Helvetica, Arial, sans-serif; ”。 它看起来像Verdana被用于某些部分。 我希望能够验证这一点。

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

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

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

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



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




基于Lalit Patel的文本测量方法和脚本,我创建了小bookmarklets ,可以猜测当前选定文本(或者如果没有选择任何内容的情况下body )正在使用的字体。 对于我来说,它能够很好地解决堆栈中使用哪种字体的问题! (尽管如此,它无法告诉你sans-serif实际映射的是什么。)

在这里抓住它们: bookmarklets : bookmarklets

源代码位于GitHub上

另请参见: 此CodePen ,它大多使用相同的代码。 尝试选择不同的段落并观看表格/猜测更新!







Related