我怎么能真正看到该元素使用的是什么字体？

Question

当我查看HTML元素的字体系列（来自js，firebug或类似文件）时，它始终是一个列表。如何从列表中查看实际使用的字体？

Answer 1

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

Answer 2

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

Answer 3

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

---

更新2012/2/4：

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

  

用于确定呈现哪种字体的内部类。它   在每种字体具有独特高度和基础的基础上运作。   给定足够大的字体大小时的宽度＆amp;样本字符串

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

还有Chrome版的Font Finder。它不同（relevant source）因为浏览器后备字体似乎是“sans” - 而不是“serif”。​​使用此方法的任何代码都必须具有特定于浏览器的后备字体知识。