如何判断 Chrome 使用的是哪种字体？ [复制]

Posted 2023-03-06

【中文标题】如何判断 Chrome 使用的是哪种字体？ [复制]

【英文标题】：How do I tell which font Chrome is using? [duplicate]

【发布时间】：2012-02-26 03:33:54

【问题描述】：

假设我有以下 CSS

font-family: 'Non-existant Sans', Arial, sans-serif;

假设系统上没有安装“不存在的 Sans”，浏览器将使用 Arial。使用 Chrome，有没有办法找出正在呈现的字体？

编辑： Dave（在问题的 cmets 中）指出了一个类似的问题。我在这里专门询问 Chrome。另一个问题中的许多答案都建议可以进行扩展，但是；是否有单独使用开发工具来确定此信息的本地方法？

2013 年 9 月编辑：Chrome 团队刚刚宣布 latest builds of Chrome Canary 中现在可以使用字体系列检查（Twitter 链接包含包含更多信息的图片）。这应该会在接下来的几周内通过 dev > beta > stable 逐渐扩散——好消息！

【参考方案1】：

在 Google Chrome 开发工具的“元素”选项卡中的“计算”下：

【讨论】：

在 Chrome 34.0.1847.116 中，渲染的字体一直列在底部的“计算”选项卡中。该部分称为“渲染字体”。此外，您必须选择具有文本的特定元素，否则将不会显示。

字体名称后面的“69 个字形”是什么意思？

@agad 这似乎意味着在所选元素中显示了许多字形（字母、数字、空格 - 换句话说）。

@Geoff 好的，谢谢

@agad（以及未来的读者）这些数字告诉您当前文本中有多少字形来自字体堆栈中的每种字体。 “字形”是表示给定字符的特定可见符号（因此，如果您有三种不同字体的字母“B”，它们都是相同的字符，但它们使用三种不同的字形。） - 字符基础，因此如果默认字体没有当前字符的字形，它将在每个连续的后备字体中查找一个。这意味着给定的文本元素可以一次偷偷使用多种字体的字形。

【参考方案2】：

我参加聚会有点晚了，但我刚刚发现了一种非常简单的方法来调试您的浏览器正在使用哪种字体。

在 Chrome Web Inspector 中，转到元素面板的 CSS 窗格中的字体堆栈。然后，从堆栈顶部开始，更改字体名称（我添加随机字母），同时注意相关文本。当您更改正在使用的字体时，您会看到文本更改字体，因为它会退回到堆栈中的下一个字体。

我认为在大多数开发工具中都可能出现类似的情况

瞧

【讨论】：

我实际上是从您的问题中的'Non-existant Sans' 得到的想法

【参考方案3】：

如果您不想使用插件，有一个小书签会告诉您这一点（一旦激活并且您将鼠标悬停在所述文本上）：

http://chengyinliu.com/whatfont.html

【讨论】：

好主意，但我只能在他的示例页面上使用它。

【参考方案4】：

您的“不存在的 Sans”可以在您的 css 中使用 @font-face 进行渲染。 http://www.w3schools.com/cs-s-ref/css3_pr_font-face_rule.asp

我不知道检测字体渲染的方法，所以从技术上讲我不回答你的问题。我确实找到了这个：http://webdesignerwall.com/tutorials/css3-font-face-design-guide 它是一个名为 Modernizr 的 javascript，可确保如果浏览器不支持 @font-face，那么它将加载诸如 Arial 和 Helvetica 之类的后备字体。