多年来,Firefox 和 Chrome 都有用于显示所有细节的内置工具,但 2021 年 10 月的 Safari 15.x 仍然需要您复制一些文本并进行调查。
火狐
在 Firefox 中,右键单击某些文本并选择检查元素后显示的页面检查器有一个 Fonts view:
这还会告诉您使用了哪种样式,例如 Regular、ExtraLight、Italic、BoldItalic 等等。
如上图所示:
.SF NS
系统字体
Apple SD Gothic Neo
Apple SD Gothic Neo Regular
因此,您会看到您正在查看的 元素 中使用的所有 字体,即使只选择一个字形也是如此。只需将单个字体名称悬停在检查器中即可突出显示使用该特定字体的字形。将“Apple SD Gothic Neo Regular”悬停在“웃”上即可:
悬停“系统字体”让我:
对于网络字体,Firefox 似乎会显示 CSS 中的名称以及下载字体中的详细信息。在其“页面上的所有字体”部分,它还说明了字体是从哪里下载的。
对我来说,在 2021 年 10 月,Firefox 拥有确定字体的最佳选择。但是:并非所有浏览器都可以使用相同的字体,请继续阅读!
铬
对于 Chrome,进入 DevTools 的“元素”,进入其“计算”选项卡,然后一直向下滚动到名为“渲染字体”的部分。与 Firefox 不同,这仅显示基本字体名称,而不是它可能使用的任何特定样式:
对于网络字体,Chrome 只显示“网络资源”(Firefox 显示更多详细信息)。
与 Firefox 一样,您会看到在您正在查看的 元素 中使用的所有 字体,即使只选择一个字形也是如此。 Chrome 确实会为您提供所选元素中使用特定字体的字形的计数,但不支持悬停以突出显示使用特定字体的字形:
.SF NS — 本地文件(192 个字形)
.Apple SD Gothic 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 窗格中的文本并删除您不感兴趣的文本。然后,当再次选择周围元素时,您只需查看一个选项。
不同浏览器的不同字体
不幸的是,由于浏览器支持/首选的字体类型,同一台机器上的不同浏览器(甚至单个浏览器的不同版本)可能使用不同的字体。例如,在 Mac 上,Safari 可能更喜欢 Apple Advanced Technology,而 Firefox 支持 Microsoft OpenType(在 Mac 上安装 Microsoft Office 后可能会产生problems for Arabic)。或者对于上面屏幕截图中的“웃”字符,现在我 Mac 上的 Firefox 和 Chrome 更喜欢“Apple SD Gothic Neo”和“.Apple SD Gothic NeoI”(它们是 OpenType PostScript),但旧版本的 Firefox 使用“AppleGothic Regular”而是(这是一种 TrueType 字体)。
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 上,Font Book 显示:
我没有调查这意味着什么。