当前位置:  开发笔记 > 编程语言 > 正文

如何确定浏览器实际使用哪种字体来呈现某些文本?

如何解决《如何确定浏览器实际使用哪种字体来呈现某些文本?》经验,为你挑选了5个好方法。

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

我已经尝试从浏览器复制和粘贴到Word,但它不保留字体.

有没有办法确定哪个字体实际用于一段文本?

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

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

Arjan.. 144

如今Chrome和Firefox都有内置的工具,但Safari需要你复制一些文本并进行调查.

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

Firefox字体视图

这也会告诉您是否下载了字体.

对于Chrome,请进入DevTools的"Elements",转到"Computed"选项卡,然后一直向下滚动到"Rendered Fonts"部分:

Chrome网络检查员

上面的屏幕截图显示可能会显示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:

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



1> Arjan..:

如今Chrome和Firefox都有内置的工具,但Safari需要你复制一些文本并进行调查.

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

Firefox字体视图

这也会告诉您是否下载了字体.

对于Chrome,请进入DevTools的"Elements",转到"Computed"选项卡,然后一直向下滚动到"Rendered Fonts"部分:

Chrome网络检查员

上面的屏幕截图显示可能会显示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:

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


太棒了,谢谢!这应该是现在接受的答案!
在Chrome 47中,请务必滚动到"已计算"部分的底部.扩展`font-family`属性(按字母顺序)将不会显示正在加载的字体.此信息显示在底部.
@Pacerier,在Chrome中只需**在Computed标签中向下滚动**; 在Firefox中查看单独的选项卡.

2> Jeremy Kauff..:

根据Wilfred Hughes的回答,Firefox现在支持这种做法.本文有更多细节.

这个答案原始引用了"Font Finder"插件,但仅仅因为它来自4年前.旧答案如此流传,社区无法更新这一事实是Stack Overflow为数不多的失败之一.


现在没有理由使用Firefox的工具> Web开发人员>检查器>字体告诉你(Wilfred Hughes的回答)
"从Firefox 47开始,默认情况下禁用字体视图.我们正在开发一个功能更全面的替代品.目前,如果要查看字体视图,请访问about:config,找到首选项devtools. fontinspector.enabled,并将其设置为true." 请参阅https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/View_fonts.

3> Wilfred Hugh..:

Firefox 22+将显示当前正在使用的字体,没有任何扩展名.



4> 小智..:

WhatFont是Chrome扩展程序,它将具体告诉您正在加载字体堆栈中的哪种字体.


对我而言,它表示声明了什么字体,但不是实际使用的字体.
根据这篇文章(http://updates.html5rocks.com/2013/09/DevTools-answers-What-font-is-that),开发工具现在可以告诉你实际呈现的字体是什么.

5> 小智..:

对于当前版本的Firefox(自v7起),有一个名为"fontinfo"的附加组件,它将报告所使用的实际字体(而不是CSS font-family属性所说的内容),同时考虑到浏览器回退到的情况.不同的字体,因为请求的字体系列不可用或不支持文本中使用的字符.

推荐阅读
夏晶阳--艺术
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有