如何判断 Chrome 使用的是哪种字体？
给定以下 CSS
html {
font-family: 'Non-existant Sans', Arial, sans-serif;
}
如果系统上未安装“Non-existant Sans”，我如何判断浏览器正在使用哪种字体？
2024 年编辑：在 2012 年，这是一个很难回答的问题。2013 年，Chrome 和其他浏览器的开发工具中添加了检查正在使用的字体的功能。
Given the following CSS
html {
font-family: 'Non-existant Sans', Arial, sans-serif;
}
How can I tell which font the browser is using if 'Non-existant Sans' is not installed on the system?
2024 edit: this was a difficult question to answer in 2012. The ability to inspect which fonts are in use was added to Chrome and other browsers’ devtools in 2013.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
在 Google Chrome 开发工具的“元素”选项卡中的“计算”下：
In Google Chrome devtools in the 'Elements' tab, under 'Computed':
我来晚了一点，但我刚刚发现了一种非常简单的方法来调试浏览器正在使用的字体。
在 Chrome Web 检查器中，转到元素面板的 CSS 窗格中的字体堆栈。然后，从堆栈顶部开始，更改字体名称（我添加随机字母），同时密切关注相关文本。当您更改正在使用的字体时，您会看到文本字体发生变化，因为它会退回到堆栈中的下一个字体。
我认为大多数开发工具中都可能有类似的事情
Voilá
I'm a bit late to the party but I've just discovered a very simple way to debug which font your browser is using.
In the Chrome Web Inspector, go to the font stack in the CSS pane of the Elements Panel. Then, starting with the top of the stack, change the name of the font (I add random letters) while keeping an eye on the text in question. When you change the one in use you will see the text change font as it falls back to the next one in the stack.
I assume something similar is possible in most dev tools
Voilá
如果您不想使用插件，有一个书签会告诉您这一点（激活后将鼠标悬停在所述文本上）：
http:// Chengyinliu.com/whatfont.html
If you don't want to use a plugin there is a bookmarklet that will tell you this (once activated and you hover over said text):
http://chengyinliu.com/whatfont.html
您的“不存在的 Sans”可以在 css 中使用 @font-face 进行渲染。
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
我不知道检测字体渲染的方法，所以从技术上讲我不会回答你的问题。我确实找到了这个： http://webdesignerwall.com/tutorials/css3-font-面部设计指南
它是一个名为 Modernizr 的 javascript，确保如果浏览器不支持 @font-face，那么它将加载后备字体，例如 Arial 和 Helvetica。
Your 'Non-existant Sans' can be rendered with @font-face in your css.
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
I don't know of a way to detect font rendering, so I don't technically answer your question. I did find this: http://webdesignerwall.com/tutorials/css3-font-face-design-guide
it's a javascript called Modernizr that ensures if a browser doesn't support @font-face then it will load fallback fonts such as Arial and Helvetica.