如何确定浏览器实际使用哪种字体来呈现某些文本？
lav*_*tle 169 css browser fonts
我的CSS font-family: Helvetica, Arial, sans-serif;为整个页面指定了" ".看起来Verdana在某些部分被使用了.我希望能够验证这一点.
我已经尝试从浏览器复制和粘贴到Word,但它不保留字体.
有没有办法确定哪个字体实际用于一段文本？
Firebug会给我上面的字体列表[1],但是我没有看到确定使用哪种字体的方法.
- 事实证明正在使用错误的列表,这解决了我原来的Verdana问题.但是我仍然很好奇是否有办法识别实际的渲染字体.
Arj*_*jan 144
如今Chrome和Firefox都有内置的工具,但Safari需要你复制一些文本并进行调查.
在Firefox中,Page Inspector有一个字体视图:
这也会告诉您是否下载了字体.
对于Chrome,请进入DevTools的"Elements",转到"Computed"选项卡,然后一直向下滚动到"Rendered Fonts"部分:
上面的屏幕截图显示可能会显示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:
- 太棒了,谢谢!这应该是现在接受的答案! (4认同)
- 在Chrome 47中,请务必滚动到"已计算"部分的底部.扩展`font-family`属性(按字母顺序)将不会显示正在加载的字体.此信息显示在底部. (4认同)
- @Pacerier,在Chrome中只需**在Computed标签中向下滚动**; 在Firefox中查看单独的选项卡. (2认同)
Jer*_*man 49
根据Wilfred Hughes的回答,Firefox现在支持这种做法.本文有更多细节.
这个答案原始引用了"Font Finder"插件,但仅仅因为它来自4年前.旧答案如此流传,社区无法更新这一事实是Stack Overflow为数不多的失败之一.
- 现在没有理由使用Firefox的工具> Web开发人员>检查器>字体告诉你(Wilfred Hughes的回答) (7认同)
- "从Firefox 47开始,默认情况下禁用字体视图.我们正在开发一个功能更全面的替代品.目前,如果要查看字体视图,请访问about:config,找到首选项devtools. fontinspector.enabled,并将其设置为true." 请参阅https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/View_fonts. (3认同)
小智 7
对于当前版本的Firefox(自v7起),有一个名为"fontinfo"的附加组件,它将报告所使用的实际字体(而不是CSS font-family属性所说的内容),同时考虑到浏览器回退到的情况.不同的字体,因为请求的字体系列不可用或不支持文本中使用的字符.
| 归档时间： |
|
| 查看次数： |
63945 次 |
| 最近记录： |