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

Question

鉴于以下CSS

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

如果系统上没有安装“Non-existant Sans”，我如何知道浏览器正在使用哪种字体？

2024 年编辑： 在 2012 年，这是一个很难回答的问题。2013 年，Chrome 和其他浏览器的开发工具中添加了检查正在使用的字体的功能。

Answer 1

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

Answer 2

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

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

我认为大多数开发工具中都可能有类似的事情

瞧

Answer 3

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

http:// Chengyinliu.com/whatfont.html

Answer 4

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

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