我的CSS为整个页面指定“font-family: Helvetica, Arial, sans-serif;”。看起来Verdana在某些部分被使用了。我希望能够证实这一点。
我试过从浏览器中复制粘贴到Word中,但无法保存字体。
有什么方法可以确定一段文本中实际使用的字体是哪种?
Firebug会给我上面[1]的字体列表,但我没有看到一种方法来确定哪个字体正在使用。
结果是使用了错误的列表,这解决了我最初的Verdana问题。但我仍然好奇是否有一种方法来识别实际的渲染字体。
我的CSS为整个页面指定“font-family: Helvetica, Arial, sans-serif;”。看起来Verdana在某些部分被使用了。我希望能够证实这一点。
我试过从浏览器中复制粘贴到Word中,但无法保存字体。
有什么方法可以确定一段文本中实际使用的字体是哪种?
Firebug会给我上面[1]的字体列表,但我没有看到一种方法来确定哪个字体正在使用。
结果是使用了错误的列表,这解决了我最初的Verdana问题。但我仍然好奇是否有一种方法来识别实际的渲染字体。
火狐的FontFinder插件正是你想要的。安装后,突出显示一个文本块,右键单击并进入FontFinder ->分析选择。它会告诉你实际使用的字体以及其他信息,如字体族,间距,颜色等。
请注意,根据Wilfred Hughes的回答,Firefox现在原生支持此功能。这篇文章有更多的细节。
多年来,Firefox和Chrome都有内置工具来显示所有细节,但2021年10月的Safari 15。X仍然需要你复制一些文本并进行调查。
火狐
在Firefox中,右键单击一些文本并选择Inspect Element后显示的页面检查器有一个字体视图:
这也会告诉你使用哪种风格,如常规,超轻,斜体,粗体斜体和所有。
如上面的截图:
. sf NS 系统字体 Apple SD Gothic Neo 苹果SD哥特式新常规
因此,您可以看到正在查看的元素中使用的所有字体,即使只选择单个字形也是如此。只需将单个字体名称悬停在检查器中,以突出显示使用该特定字体的字形。悬停在“Apple SD Gothic Neo Regular”上,很好地突出了“웃”:
悬停在“系统字体”得到我:
对于网页字体,Firefox似乎会显示CSS中的名称以及下载字体中的详细信息。在“页面上的所有字体”部分,它还告诉字体是从哪里下载的。
对我来说,在2021年10月,Firefox有最好的选择来确定字体。但是:不是所有浏览器都使用相同的字体,所以请继续阅读!
铬
对于Chrome浏览器,进入DevTools的“元素”,进入它的“计算”选项卡,并一直向下滚动到“渲染字体”部分。与Firefox不同,这只显示基本字体名称,而不是它可能使用的任何特定样式:
对于网页字体,Chrome只显示“网络资源”(Firefox显示更多细节)。
与Firefox一样,您可以看到正在查看的元素中使用的所有字体,即使只选择单个字形也是如此。Chrome浏览器会给你一个在选定元素中使用特定字体的字形的计数,但不支持悬停来突出显示使用特定字体的字形:
.SF NS -本地文件(192个字形) .Apple SD哥特式NeoI -本地文件(1个字形)
Safari
2021年10月的Safari 15终于引入了“字体”选项卡,但其输出相当有限。对于“身份”,它经常显示次要信息,如“TN网络使用仅”(Firefox显示为评论,如在“州际浓缩,TN网络使用仅”)。或者什么都不显示。但最后,这是一个开始:
这只适用于元素。对于文本节点(如单个字符),字体选项卡不显示。
对于上面使用的相同示例,Safari甚至没有指示使用多种字体:
身份 名字.AppleSystemUIFont
所以,继续往下读。
其他浏览器(和Safari)
对于Safari和其他没有完整字体视图的浏览器,只需将文本片段复制并粘贴到一些文字处理程序或富文本编辑器中,选择一些特定的文本,并查看哪个名称出现在一些字体下拉列表中。在我的Mac上,这在从Firefox粘贴时不起作用(其中“웃”Firefox的“Apple SD Gothic Neo”在粘贴时转换为“AppleMyungjo”),但在Safari和Chrome上工作良好:
单个HTML元素中的多个字体
对于上面的截图,实际的CSS定义:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
但这些字体通常不包括很多特殊字符。由于字体信息适用于每个HTML元素,其中元素中的Unicode文本实际上可以在其子文本节点中使用多种字体,因此开发人员工具也会显示多种字体。如果有疑问,将字体悬停在Firefox中,或者在其他浏览器中双击HTML窗格中的文本,删除您不感兴趣的文本。然后,当再次选择周围的元素时,您将只看到一个选项。
不同的浏览器使用不同的字体
Unfortunately, different browsers (and even different versions of a single browser) on the very same machine may use different fonts, due to the font types supported/preferred by a browser. On a Mac, for example, Safari may prefer Apple Advanced Technology while Firefox supports Microsoft OpenType (which may yield problems for Arabic after installing Microsoft Office on a Mac). Or for the "웃" character in the screenshots above, Firefox and Chrome on my Mac nowadays prefer "Apple SD Gothic Neo" and ".Apple SD Gothic NeoI" (which are OpenType PostScript) but older versions of Firefox used "AppleGothic Regular" instead (which is a TrueType font).
file /System/Library/Fonts/AppleSDGothicNeo.ttc
/System/Library/Fonts/AppleSDGothicNeo.ttc: OpenType font collection data, 2.0, 18 fonts, at 0x60 OpenType Font data, 18 tables, 1st "BASE"
file /System/Library/Fonts/Supplemental/AppleGothic.ttf
/System/Library/Fonts/Supplemental/AppleGothic.ttf: TrueType Font data, 18 tables, 1st "cmap", 33 names, Macintosh, Copyright ? 1994-2006 Apple Computer, Inc. All rights reserved.AppleGothicRegularAppleGothic Reg
请注意,Chrome(在Mac上)在“NeoI”中显示了一个前导点和后面的大写“i”,这在Firefox中是没有的。在那台Mac上,字体手册显示:
我还没有调查过这意味着什么。
不需要使用任何外部浏览器插件。 为了检查哪种字体是真正使用在谷歌Chrome浏览器的网站上,你需要:
打开开发人员工具(右键单击网站并选择inspect) 在“元素”选项卡中选择所需的对象 选择“computed”选项卡,在底部窗格中你会看到“渲染字体”: