我的CSS为整个页面指定了“ font-family: Helvetica, Arial, sans-serif;
” . 看起来Verdana在某些部分被使用了 . 我希望能够验证这一点 .
我已经尝试从浏览器复制和粘贴到Word,但它不保留字体 .
有没有办法确定哪个字体实际用于一段文本?
Firebug会给我上面的字体列表[1],但是我没有看到确定使用哪种字体的方法 .
- 事实证明正在使用错误的列表,这解决了我原来的Verdana问题 . 但我_1588270是一种识别实际渲染字体的方法 .
8 回答
Firefox 22+ will show you which font is currently in use,没有任何扩展名 .
WhatFont是Chrome扩展程序,它会明确告诉您正在加载字体堆栈中的哪种字体 .
对于当前版本的Firefox(自v7起),有一个名为“fontinfo”的附加组件,它将报告所使用的实际字体(而不是CSS font-family属性所说的内容),同时考虑到浏览器回退到的情况 . 不同的字体,因为请求的字体系列不可用或不支持文本中使用的字符 .
您可以尝试使用Firebug for Firefox检查该特定部分 . 它应该给你所有的确切属性 .
jeremy提到的“FontFinder”插件似乎无法在这里工作,无论实际呈现的字体是什么,都会给出CSS列表的第一个字体(Linux上的Firefox 4.0rc1) . 但是,以下插件会为您提供“正确”的字体 .
Context Font
根据Wilfred Hughes' answer,Firefox现在支持此功能 . This article has more details .
这个答案原始引用了“Font Finder”插件,但仅仅因为它来自4年前 . 旧答案如此流传,社区无法更新这一事实是Stack Overflow为数不多的失败之一 .
如今Chrome和Firefox都有内置的工具,但Safari需要你复制一些文本并进行调查 .
在Firefox中,Page Inspector有一个Fonts view:
这也会告诉您是否下载了字体 .
对于Chrome,请进入DevTools的“Elements”,转到“Computed”选项卡,然后一直向下滚动到“Rendered Fonts”部分:
上面的屏幕截图显示可能会显示Unicode文本的多种字体 . Chrome告诉你6个glyphes(“Pekka”和空格)正在使用“Arial”,而一个(“웃”)正在使用“Apple SD Gothic Neo”:
实际的CSS定义:
但这些字体通常不包含许多特殊字符 . 由于字体信息适用于每个HTML元素,其中元素中的Unicode文本实际上可以使用多种字体,因此它也显示多种字体 . 如有疑问,只需双击HTML窗格中的文本即可删除您不感兴趣的文本 . 然后,再次选择周围的元素时,您只会看到一个选项 . 在这种情况下,它会告诉你两个浏览器都使用“Apple SD Gothic Neo Regular”作为“웃”字符 .
不幸的是,由于浏览器支持/首选的字体类型,同一台机器上的不同浏览器(甚至是单个浏览器的不同版本)可能会使用不同的字体 . 例如,在Mac上,Safari可能更喜欢Apple Advanced Technology,而Firefox支持Microsoft OpenType(在Mac上安装Microsoft Office后可能会产生problems for Arabic) . 或者对于上面屏幕截图中的"웃"字符,我的Mac上的Chrome和Firefox现在更喜欢"Apple SD Gothic Neo"(这是OpenType PostScript),但旧版本的Firefox使用了"AppleGothic Regular"(这是一种TrueType字体) .
对于没有类似字体视图的浏览器,只需将文本片段复制并粘贴到某个文字处理器或富文本编辑器中,选择一些特定文本,然后查看某些字体下拉列表中显示的名称 . 在我的Mac上,当从Firefox粘贴时,这不起作用(“웃”Firefox的“Apple SD Gothic Neo”在粘贴时转换为“AppleMyungjo”),但适用于Safari和Chrome:
基于Lalit Patel的文本测量方法和脚本,我创建了bookmarklets,它可以猜测当前所选文本使用的字体(如果没有选择,则为
body
) . 对于我来说,找出堆栈中的哪个字体似乎非常有效用过的! (但它无法告诉你sans-serif
究竟映射到了什么 . )grab 他们:https://alanhogan.com/bookmarklets#font-stack-full
来源是on GitHub .
另请参阅:this CodePen,它主要使用相同的代码 . 通过选择不同的段落尝试并观看表格/猜测更新!