我怎么才能真正看到元素使用的字体？-HowcanIreallyseewhatfonttheelementisusing?

2  

The Font Finder add-on for Firefox can do this. Since it’s clearly possible, it sure would be convenient if this were built in to Firebug.

Firefox的Font Finder插件可以执行此操作。因为它显然是可能的,如果它被内置到Firebug中肯定会很方便。

Update 2012/2/4:

I examined the Font Finder source to find out how it works, and it’s actually a clever little hack. The relevant code is in the Detector class in fontfinder.js. To quote the source:

我检查了字体查找器源以了解它是如何工作的,它实际上是一个聪明的小黑客。相关代码位于fontfinder.js中的Detector类中。引用来源:

Inner class that's used to determine which font is rendered. It operates under the foundation that each font has a unique height & width when given a large enough font size & sample string

用于确定呈现哪种字体的内部类。它的基础是每个字体在给定足够大的字体大小和样本字符串时具有唯一的高度和宽度

What’s it doing is almost like an automated version of Marcel’s answer. So how it works is that a dummy element — with the text “mmmmmmmmmmlil” — is added to the DOM. It is set to use the browser fallback font, “serif”, at a font-size of 72px. With that, Font Finder knows the width and height of the element when the fallback font is in use. Next, it just iterates through all the fonts listed in the font-family, setting the font on the element in turn, for each one in the list. If the width and height of the element matches the width and height when the fallback font was set, we can deduce that the given font is not present. The first font in the list which produces a different width or height on the element will be the font that is actually being rendered (note: there is a special case involved when the fallback font, “serif,” is in the font-family list).

它的作用几乎就像是Marcel答案的自动化版本。所以它的工作原理是将一个虚拟元素 - 文本“mmmmmmmmmmlil” - 添加到DOM中。它被设置为使用浏览器后备字体“serif”,字体大小为72px。这样,Font Finder在使用后备字体时知道元素的宽度和高度。接下来,它只是遍历font-family中列出的所有字体,依次为列表中的每个字体设置元素上的字体。如果在设置回退字体时元素的宽度和高度与宽度和高度匹配,我们可以推断出给定的字体不存在。列表中第一个在元素上生成不同宽度或高度的字体将是实际呈现的字体(注意:当后备字体“serif”在字体系列列表中时,会出现一种特殊情况)。

There is also a Chrome version of Font Finder. It differs (relevant source) in that the browser fallback font appears to be “sans” — not “serif.” Any code using this method will have to have browser-specific knowledge of the fallback font.

还有Chrome版的Font Finder。它的不同之处(相关来源)是浏览器后备字体似乎是“sans” - 而不是“serif”。​​使用此方法的任何代码都必须具有后备字体的浏览器特定知识。

7  

I realise it's not ideal, but you can copy the text from the viewport and paste it into a rich text editor, and it will tell you.

我意识到它并不理想,但您可以从视口中复制文本并将其粘贴到富文本编辑器中,它会告诉您。

6  

It's a bit fiddly, but using Firebug you can tweak the name of each font in a font-family, working left to right until the element's font changes, meaning it was the last font you changed is being used. On the latest Firebug at least, you only need to add or remove a letter from a font's name for the change to be reflected.

它有点繁琐,但是使用Firebug你可以在字体系列中调整每种字体的名称,从左到右工作直到元素的字体发生变化,这意味着它是你改变的最后一种字体。至少在最新的Firebug上,您只需要添加或删除字体名称中的字母,以便反映更改。