如何确定浏览器实际用于呈现某些文本的字体?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (20)

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

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

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

提问于
用户回答回答于
用户回答回答于

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

在Firefox中,Page Inspector有一个字体视图

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

对于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上的Chrome和Firefox更喜欢“Apple SD Gothic Neo”(OpenType PostScript),但老版本的Firefox使用“AppleGothic Regular”代替(这是一种TrueType字体) 。

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

扫码关注云+社区