CSS 如何判断 Chrome 使用的是哪种字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9129966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I tell which font Chrome is using?
提问by Liam Newmarch
Imagine I have the following CSS
想象一下我有以下 CSS
font-family: 'Non-existant Sans', Arial, sans-serif;
Assuming 'Non-existant Sans' is not installed on the system, Arial will be used by the browser. Using Chrome, is there any way of finding out which font is being rendered?
假设系统上没有安装“不存在的 Sans”，浏览器将使用 Arial。使用 Chrome，有没有办法找出正在渲染的字体？
Edit:Dave (in the comments to the question) has pointed out a similar question. I'm specifically asking about Chrome here. Many of the answers in the other question suggest extensions which are okay, however; is there a native way of determining this information using the Dev Tools alone?
编辑：戴夫（在对问题的评论中）指出了一个类似的问题。我在这里专门询问 Chrome。然而，另一个问题中的许多答案都表明可以进行扩展；是否有单独使用开发工具来确定此信息的本地方法？
Edit Sept 2013:The Chrome team have just announced that font-family inspection is now available in the latest builds of Chrome Canary(Twitter link contains an image with more info). This should trickle down through dev > beta > stable over the next few weeks – great news!
2013 年 9 月编辑：Chrome 团队刚刚宣布，字体系列检查现在可以在最新版本的 Chrome Canary 中使用（Twitter 链接包含包含更多信息的图像）。这应该会在接下来的几周内通过 dev > beta > stable 逐步渗透——好消息！
回答by Jürgen Paul
In Google Chrome devtools in the 'Elements' tab, under 'Computed':
在“元素”选项卡中的 Google Chrome 开发工具中，在“计算”下：
回答by Iolo
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.
在 Chrome Web Inspector 中，转到 Elements Panel 的 CSS 窗格中的字体堆栈。然后，从堆栈顶部开始，更改字体名称（我添加随机字母），同时注意相关文本。当您更改正在使用的字体时，您将看到文本更改字体，因为它回落到堆栈中的下一个字体。
I assume something similar is possible in most dev tools
我认为在大多数开发工具中都可能有类似的东西
Voilá
瓦伊拉
回答by Seb Ashton
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):
如果您不想使用插件，有一个书签会告诉您这一点（一旦激活并将鼠标悬停在所述文本上）：
回答by Noah Rainey
Your 'Non-existant Sans' can be rendered with @font-face in your css. http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
您的“不存在的 Sans”可以在您的 css 中使用 @font-face 呈现。 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-guideit'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.
我不知道检测字体渲染的方法，所以我不从技术上回答你的问题。我确实发现了这一点：http: //webdesignerwall.com/tutorials/css3-font-face-design-guide这是一个名为 Modernizr 的 javascript，可确保浏览器不支持 @font-face 则它将加载后备字体，例如Arial 和 Helvetica。
