当前位置：文江博客话题详情

如何确定浏览器实际使用什么字体来呈现某些文本？

发布于 2024-07-20 07:07:49 字数 333 浏览 5 评论 0原文

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

我尝试从浏览器复制并粘贴到 Word 中，但它没有保留字体。

有没有某种方法可以确定文本部分实际使用哪种字体？

Firebug 会给我上面的字体列表[1]，但我没有找到一种方法来确定正在使用哪种字体。

事实证明使用了错误的列表，这解决了我原来的 Verdana 问题。但我仍然很好奇是否有一种方法可以识别实际的渲染字体。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

下雨或天晴 2024-07-27 07:07:49

多年来，Firefox 和 Chrome 都有内置工具来显示所有详细信息，但 2021 年 10 月的 Safari 15.x 仍然需要您复制一些文本并进行调查。

Firefox

在 Firefox 中，右键单击某些文本并选择“检查元素”后显示的页面检查器有一个字体视图：

这也会告诉您使用的是哪种样式，例如 Regular、ExtraLight、Italic、BoldItalic 等等。

就像上面的截图一样：

.SF NS
系统字体
Apple SD Gothic Neo
Apple SD Gothic Neo 常规

因此，即使只选择单个字形，您也会看到正在查看的元素中使用的所有字体。只需将鼠标悬停在检查器中的单个字体名称即可突出显示使用该特定字体的字形。将鼠标悬停在“Apple SD Gothic Neo Regular”上可以很好地突出显示“웃”：

悬停“系统字体”让我：

对于网络字体，Firefox 似乎显示来自 CSS 的名称以及下载字体中的详细信息。在“页面上的所有字体”部分中，它还说明了字体的下载位置。

对我来说，2021 年 10 月，Firefox 拥有确定字体的最佳选项。但是：并非所有浏览器都可以使用相同的字体，所以请继续阅读！

Chrome

对于 Chrome，进入 DevTools 的“Elements”，进入其“Compulated”选项卡，然后一直向下滚动到名为“Rendered Fonts”的部分。与 Firefox 不同，这仅显示基本字体名称，而不显示它可能使用的任何特定样式：

对于网络字体，Chrome 仅显示“网络资源”（Firefox 在其中显示更多详细信息）。

与 Firefox 一样，您可以看到正在查看的元素中使用的所有字体，即使只选择单个字形也是如此。 Chrome 确实会为您提供所选元素内使用特定字体的字形的计数，但不支持悬停以突出显示使用特定字体的字形：

.SF NS — 本地文件（192 个字形）
.Apple SD Gothic NeoI — 本地文件（1 个字形）

Safari

2021 年 10 月的 Safari 15 终于引入了“字体”选项卡，但其输出相当有限。对于“身份”，它通常显示次要信息，例如“仅限 TN 网络使用”（其中 Firefox 将其显示为注释，如“Interstate Condensed，仅限 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 后出现阿拉伯语问题）。或者对于上面屏幕截图中的“웃”字符，我的 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 上，字体册显示：

我还没有研究过这意味着什么。

Since many years Firefox and Chrome have built-in tools for that to show all details, but the October 2021 Safari 15.x still needs you to copy some text and investigate that.

Firefox

In Firefox, the Page Inspector that shows after right-clicking some text and choosing Inspect Element, has a Fonts view:

This will also tell you which style is used, such as Regular, ExtraLight, Italic, BoldItalic and all.

Like for the above screenshot:

.SF NS
System Font
Apple SD Gothic Neo
Apple SD Gothic Neo Regular

So, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Just hover a single font name in the inspector to highlight the glyphe(s) that use that specific font. Hovering "Apple SD Gothic Neo Regular" nicely highlights just the "웃":

Hovering "System Fonts" gets me:

For web fonts, it seems Firefox shows the name from the CSS along with details from within the downloaded font. In its "All Fonts on Page" section it also tells where fonts were downloaded from.

For me, in October 2021, Firefox has the best options to determine the font. But: not all browsers may use the same font, so read on!

Chrome

For Chrome, go into DevTools' "Elements", go to its "Computed" tab, and scroll all the way down to the section called "Rendered Fonts". Unlike with Firefox, this only shows the base font name, not any specific style it may be using:

For web fonts, Chrome just shows "Network resource" (where Firefox shows many more details).

Like with Firefox, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Chrome does give you a count of the glyphes that use a specific font within the selected element, but does not support hovering to highlight the glyphe(s) that use a specific font:

.SF NS — Local file (192 glyphs)
.Apple SD Gothic NeoI — Local file (1 glyph)

Safari

The October 2021 Safari 15 has finally introduced a "Fonts" tab, but its output is quite limited. For "Identity" it often shows secondary information such as "TN web use only" (where Firefox shows that as a comment, like in "Interstate Condensed, TN web use only"). Or shows nothing at all. But, finally, it's a start:

This only works for elements. For text nodes (like a single character), the fonts tab is not shown.

For the same example as used above, Safari does not even indicate multiple fonts are used:

Identity
Name .AppleSystemUIFont

So, read on.

Other browsers (and Safari)

For Safari and other browsers that do not have a full fledged fonts view, simply copy & paste a fragment of the text into some word processor or Rich Text editor, select some specific text, and see which name shows up in some font dropdown list. On my Mac, this does not work when pasting from Firefox (where for "웃" Firefox's "Apple SD Gothic Neo" is converted into "AppleMyungjo" on pasting), but works well for Safari and Chrome:

Multiple fonts in a single HTML element

For the above screenshots, the actual CSS defines:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;

But those fonts often don't include many special characters. As the font information works per HTML element, where Unicode text in an element could actually use multiple fonts in its child text node, the developer tools show multiple fonts as well. When in doubt, hover the fonts in Firefox, or in other browsers just double-click the text in the HTML pane and get rid of the text you're not interested in. Then, when selecting the surrounding element again, you'll just see one option.

Different fonts in different browsers

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

Note that Chrome (on a Mac) shows a leading dot and trailing uppercase "i" in "NeoI" which are lacking in Firefox for the same example. On that Mac, Font Book shows: