CSS 如何确定浏览器实际使用哪种字体来呈现某些文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/884177/
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 can I determine what font a browser is actually using to render some text?
提问by lavaturtle
My CSS specifies "font-family: Helvetica, Arial, sans-serif;" for the whole page. It looks like Verdana is being used instead on some parts. I would like to be able to verify this.
我的 CSSfont-family: Helvetica, Arial, sans-serif;为整个页面指定了“ ”。看起来有些部分正在使用 Verdana。我希望能够验证这一点。
I've tried copying and pasting from my browser into Word, but it's not preserving the font.
我试过从我的浏览器复制并粘贴到 Word 中，但它没有保留字体。
Is there some way to determine which font is actually being used for a section of text?
有没有办法确定一段文本实际使用的是哪种字体？
Firebug will give me the list of fonts as above[1], but I don't see a way to determine which one of the fonts is being used.
Firebug 会给我上面[1] 的字体列表，但我看不到确定正在使用哪种字体的方法。
- It turns out the wrong list was being used, which solved my original Verdana problem. But I'm still curious if there's a way to identify the actual rendering font.
- 结果发现使用了错误的列表，这解决了我原来的 Verdana 问题。但是我仍然很好奇是否有一种方法可以识别实际的渲染字体。
采纳答案by Jeremy Kauffman
Per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.
根据Wilfred Hughes 的回答，Firefox 现在原生支持此功能。这篇文章有更多细节。
This answer original referenced the "Font Finder" plugin, but only because it was from 4 years ago. The fact that old answers linger like this and the community cannot update them is one of the few remaining failures of Stack Overflow.
这个答案原来引用了“字体查找器”插件，但只是因为它是 4 年前的。旧答案像这样徘徊并且社区无法更新它们的事实是 Stack Overflow 为数不多的失败之一。
回答by Arjan
Nowadays Chrome and Firefox have built-in tools for that, but Safari needs you to copy some text and investigate that.
现在 Chrome 和 Firefox 有内置工具，但 Safari 需要你复制一些文本并进行调查。
First, select some text. In Firefox, the Page Inspector has a Fonts view:
首先，选择一些文本。在 Firefox 中，页面检查器有一个Fonts 视图：
This will also tell you if fonts were downloaded, and which style is used, such as Regular, ExtraLight, Italic, BoldItalic and all.
这还会告诉您是否下载了字体，以及使用了哪种样式，例如常规、ExtraLight、斜体、粗斜体等等。
For Chrome, go into DevTools' "Elements", go to its "Computed" tab, and scroll all the way down to the section called "Rendered Fonts". Unlike with Firefox, this only shows the base font name, not any specific style it might be using:
对于 Chrome，进入 DevTools 的“Elements”，转到它的“Computed”选项卡，然后一直向下滚动到名为“Rendered Fonts”的部分。与 Firefox 不同，这仅显示基本字体名称，而不显示它可能使用的任何特定样式：
The above screenshots show that multiple fonts might be shown for Unicode text. Chrome tells you 6 glyphes ("Pekka" and the space) are using "Arial", and one ("?") is using "Apple SD Gothic Neo":
上面的屏幕截图显示可能会为 Unicode 文本显示多种字体。Chrome 告诉你 6 个字形（“Pekka”和空格）使用“Arial”，一个（“？”）使用“Apple SD Gothic Neo”：
Arial— Local file (6 glyphs)
Apple SD Gothic Neo— Local file (1 glyph)
Arial— 本地文件（6 个字形）
Apple SD Gothic Neo— 本地文件（1 个字形）
The actual CSS defines:
实际的 CSS 定义：
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif
But those fonts often don't include many special characters. As the font information works per HTML element, where Unicode text in an element could actually use multiple fonts, it shows multiple fonts as well. When in doubt, just double-click the text in the HTML pane and get rid of the text you're not interested in. Then, when selecting the surrounding element again, you'll just see one option. In this case it would tell you that both browsers used "Apple SD Gothic Neo Regular" for the "?" character.
但是这些字体通常不包含许多特殊字符。由于字体信息适用于每个 HTML 元素，元素中的 Unicode 文本实际上可以使用多种字体，因此它也显示多种字体。如有疑问，只需双击 HTML 窗格中的文本并删除您不感兴趣的文本。然后，再次选择周围元素时，您只会看到一个选项。在这种情况下，它会告诉您两个浏览器都使用“Apple SD Gothic Neo Regular”作为“？” 特点。
Unfortunately, different browsers (and even different versions of a single browser) on the very same machine might use different fonts, due to the font types supported/preferred by a browser. On a Mac, for example, Safari might prefer Apple Advanced Technology while Firefox supports Microsoft OpenType (which might yield problems for Arabicafter installing Microsoft Office on a Mac). Or for the "?" character in the screenshots above, Chrome and Firefox on my Mac nowadays prefer "Apple SD Gothic Neo" (which is OpenType PostScript) but older versions of Firefox used "AppleGothic Regular" instead (which is a TrueType font).
不幸的是，由于浏览器支持/偏好的字体类型，同一台机器上的不同浏览器（甚至单个浏览器的不同版本）可能使用不同的字体。例如，在 Mac 上，Safari 可能更喜欢 Apple Advanced Technology，而 Firefox 支持 Microsoft OpenType（在 Mac 上安装 Microsoft Office 后，这可能会导致阿拉伯语出现问题）。还是为了“？” 在上面的屏幕截图中，我的 Mac 上的 Chrome 和 Firefox 现在更喜欢“Apple SD Gothic Neo”（即 OpenType PostScript），但旧版本的 Firefox 使用“AppleGothic Regular”（一种 TrueType 字体）。
For browsers that do not have a similar fonts view, simply copy & paste a fragment of the text into some word processor or Rich Text editor, select some specific text, and see which name shows up in some font dropdown list. On my Mac, this does not work when pasting from Firefox (where for "?" Firefox's "Apple SD Gothic Neo" is converted into "AppleMyungjo" on pasting), but works well for Safari and Chrome:
对于没有类似字体视图的浏览器，只需将文本片段复制并粘贴到某个文字处理器或富文本编辑器中，选择一些特定文本，然后查看某个字体下拉列表中显示的名称。在我的 Mac 上，这在从 Firefox 粘贴时不起作用（“？”Firefox 的“Apple SD Gothic Neo”在粘贴时转换为“AppleMyungjo”），但适用于 Safari 和 Chrome：
回答by Wilfred Hughes
Firefox 22+ will show you which font is currently in use, without any extensions.
Firefox 22+ 将显示当前正在使用的字体，没有任何扩展。
回答by user1100745
回答by Jonathan
For current versions of Firefox (since v7), there's an add-on called "fontinfo" that will report the actual font being used (rather than what the CSS font-family property says), taking account of cases where the browser falls back to a different font because the requested font-family wasn't available or didn't support the characters used in the text.
对于当前版本的 Firefox（自 v7 起），有一个名为“fontinfo”的附加组件将报告正在使用的实际字体（而不是 CSS font-family 属性所说的），考虑到浏览器回退到不同的字体，因为请求的字体系列不可用或不支持文本中使用的字符。
回答by Dave Vogt
The "FontFinder" plugin mentioned by jeremy seems not to work here, giving the first font of the CSS list regardless of the actually rendered font (Firefox 4.0rc1 on Linux). The following plugin however gives you the "correct" font, it seems.
jeremy 提到的“FontFinder”插件在这里似乎不起作用，无论实际呈现的字体如何（Linux 上的 Firefox 4.0rc1），都会给出 CSS 列表的第一个字体。但是，以下插件似乎为您提供了“正确”的字体。
回答by jeroen
You could try checking that specific section with Firebug for Firefox. It should give you all the exact properties.
您可以尝试使用 Firebug for Firefox 检查该特定部分。它应该为您提供所有确切的属性。
回答by Alan H.
Based on the text-measuring approach and script from Lalit Patel, I have created bookmarkletsthat can guess the font that is being used for the currently selected text (or the body, if nothing is selected). It seems to work very well for me for figuring out which font in a stack is used! (It can't tell you what sans-serifactually maps to, though.)
基于来自 Lalit Patel 的文本测量方法和脚本，我创建了书签，可以猜测当前所选文本（或body，如果没有选择）正在使用的字体。对我来说，找出堆栈中使用的字体似乎非常有效！（不过，它无法告诉您sans-serif实际映射到的内容。）
Grab them here: https://alanhogan.com/bookmarklets#font-stack-full
在此处获取它们：https: //alanhogan.com/bookmarklets#font-stack-full
The source is on GitHub.
来源在 GitHub 上。
See also: this CodePen, which uses mostly the same code. Give it a try by selected different paragraphs and watching the table / guess update!
另请参阅：此 CodePen，它使用大部分相同的代码。通过选择不同的段落并观看表格/猜测更新来尝试一下！
