【问题标题】:How can I determine what font a browser is actually using to render some text?如何确定浏览器实际使用什么字体来呈现某些文本?
【发布时间】:2010-10-27 10:01:51
【问题描述】:

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

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

有什么方法可以确定一段文本实际使用的是哪种字体?

Firebug 会给我上面的字体列表[1],但我看不到确定正在使用哪种字体的方法。

  1. 原来使用了错误的列表,这解决了我最初的 Verdana 问题。但我仍然很好奇是否有办法识别实际的渲染字体。

【问题讨论】:

  • 下面答案中描述的FontFinder和WhatFont仍然是检测所用字体的非常粗略的方法。当我选择此字体中不可用的 Aghani ؋ 符号时,两者都错误地指示“Quanttrocentro Sans”(主要字体)。
  • @QuestionOverflow,现在 Firefox 和 Chrome 都有内置工具来确定字体。它们显示每个字形的字体,因此也会显示该 ؋ 使用的字体。
  • @Arjan:2020年还是这样吗?
  • @devouredelysium,你看到my answer了吗?只需选择一个字形即可查看使用的字体。

标签: css browser fonts


【解决方案1】:

多年来,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 显示:

我没有调查这意味着什么。

【讨论】:

  • 你知道 Safari 是否有插件或其他东西吗?
  • 在 Chrome 47 中,确保滚动到计算部分的底部。扩展出现的font-family 属性(按字母顺序)不会显示正在加载的字体。此信息显示在底部。
  • @Merchako,当您的计算字体是“serif”和“sans-serif”等通用字体时会发生什么?那你怎么得到actual字体呢?
  • @Pacerier,在 Chrome 中,只需在“计算”选项卡中一直向下滚动;在 Firefox 中查看单独的选项卡。
  • @TMG,我可以想象网络字体可能不需要别名,但可以直接引用一些 URL。这是一个我们可以查看的公共网站吗?如果没有,Firefox 会显示什么?
【解决方案2】:

根据Wilfred Hughes' answer,Firefox 现在原生支持此功能。 This article has more details

这个答案最初引用了“Font Finder”插件,但只是因为它是 4 年前的。旧答案像这样徘徊并且社区无法更新它们的事实是 Stack Overflow 剩下的少数失败之一。

【讨论】:

  • 既然 Firefox 的 Tools > Web Developer > Inspector > Fonts 告诉你,没有理由使用它(Wilfred Hughes 的回答)
  • 不幸的是,Firefox 47 不再具有您链接到的此博客中引用的字体选项卡:This article has more details
  • "从 Firefox 47 开始,字体视图默认处于禁用状态。我们正在开发功能更全面的替代品。目前,如果您想查看字体视图,请访问 about :config,找到首选项 devtools.fontinspector.enabled,并将其设置为 true。”见developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/…
  • 显然,只有在 Firefox 47 中才需要设置 devtools.fontinspector.enabled"在 Firefox 47 only 中,字体视图默认是禁用的。如果你想查看Firefox 47 中的字体视图,访问about:config,找到偏好设置devtools.fontinspector.enabled,并将其设置为true。在Firefox 47 之前和之后,默认启用字体视图。”,@DanielLe。
  • @DanielLe,我当然知道你复制文本时是正确的:-)
【解决方案3】:

【讨论】:

  • 这真的应该是最终的答案。无需安装扩展。
  • 但可能有人不使用的浏览器。从这个意义上说,扩展更轻量级。
【解决方案4】:

WhatFont 是一个 Chrome 扩展程序,它会明确告诉您正在加载字体堆栈中的哪种字体。

【讨论】:

【解决方案5】:

对于当前版本的 Firefox(自 v7 起),有一个名为“fontinfo”的附加组件将报告正在使用的实际字体(而不是 CSS font-family 属性所说的),考虑到浏览器的情况回退到不同的字体,因为请求的字体系列不可用或不支持文本中使用的字符。

【讨论】:

  • 到目前为止,这是最好的答案
【解决方案6】:

您可以尝试使用 Firebug for Firefox 检查该特定部分。它应该为您提供所有确切的属性。

【讨论】:

  • 这仍然给了我列表,而不是它正在使用的特定列表...但是在第二次检查中,Verdana 不知何故进入了字体系列列表,这将是我原来问题的原因.所以,谢谢。
  • Firebug 还会告诉您触发了哪些规则以赋予元素该字体 - 这对于找出 CSS 出错的位置非常有用。
  • Safari 4 Beta 也有一个 WebInspector(可能是剥了皮的萤火虫)
  • 我认为无论您使用什么工具,您总会得到完整的列表。使用的字体是您计算机上安装的列表中的第一个字体。
  • Firebug 当前(1.11.4,也可能更早)以蓝色突出显示当前字体。
【解决方案7】:

jeremy 提到的“FontFinder”插件似乎在这里不起作用,它给出了 CSS 列表的第一个字体,而不管实际呈现的字体(Linux 上的 Firefox 4.0rc1)。但是,以下插件似乎为您提供了“正确”的字体。

Context Font

【讨论】:

  • 不幸的是,即使是 Context Font 也只显示计算出的 CSS 系列,例如,可能是 serif 或 sans-serif。此外,如果计算字体中不存在某些字符并且浏览器从不同字体中选择它,上下文字体仍然显示计算字体系列,而不是真实字体。
【解决方案8】:

基于来自 Lalit Patel 的文本测量方法和脚本,我创建了bookmarklets,它可以猜测当前选定文本所使用的字体(或body,如果未选择任何内容)。对我来说,确定使用堆栈中的哪种字体似乎非常有效! (但它无法告诉您 sans-serif 实际映射到什么。)

在这里获取它们: https://alanhogan.com/bookmarklets#font-stack-full

来源是on GitHub

另请参阅:this CodePen,它使用几乎相同的代码。通过选择不同的段落并观看表格/猜测更新来尝试一下!

【讨论】:

    【解决方案9】:

    无需为此使用任何外部浏览器插件。 为了在 Google Chrome 中检查网站上真正使用的字体,您需要:

    • 打开开发者工具(右键点击网站并选择检查)
    • 在“元素”选项卡中选择所需的对象
    • 选择“计算”选项卡,在底部窗格中您会看到“渲染字体”:

    【讨论】:

      【解决方案10】:

      您可以尝试使用Find Website Used Fonts 来识别网站或网页上使用的不同字体。它是一个免费的 chrome 扩展程序,还可以让您预览从网页识别的不同字体样式的您自己输入的文本.超级方便且易于使用,它也是免费的,所以这是一个主要优点。希望对您有所帮助?

      【讨论】:

        猜你喜欢
        • 2013-02-08
        • 2017-08-05
        • 2014-12-21
        • 2023-03-07
        • 1970-01-01
        • 1970-01-01
        • 2021-09-05
        • 2017-04-25
        相关资源
        最近更新 更多