Css 如何才能真正看到元素使用的字体？

当我查看HTML元素（来自js、firebug或类似的）的字体系列时，它总是一个列表。如何才能看到列表中实际使用的字体？

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

这有点复杂，但使用Firebug可以调整字体族中每个字体的名称，从左到右操作，直到元素的字体发生更改，这意味着您最后更改的字体正在使用中。至少在最新的Firebug上，您只需在字体名称中添加或删除一个字母即可反映更改。

Firefox的插件可以做到这一点。因为这显然是可能的，如果这是内置在Firebug中的话，肯定会很方便

---

更新2012/2/4:

我检查了Font Finder源代码以了解它是如何工作的，它实际上是一个聪明的小技巧。相关代码位于fontfinder.js中。引用消息来源：

用于确定呈现哪个字体的内部类。信息技术 在每个字体具有唯一高度的基础上进行操作。 给定足够大的字体大小和示例字符串时的宽度

它所做的几乎就像一个自动化版本的。 因此，它的工作原理是向DOM中添加一个伪元素（带有文本“mmmmlil”）。它设置为使用浏览器回退字体“serif”，字体大小为72px。这样，Font Finder就可以在使用回退字体时知道元素的宽度和高度。接下来，它将遍历

字体系列

中列出的所有字体，为列表中的每个字体依次设置元素上的字体。如果元素的宽度和高度与设置回退字体时的宽度和高度匹配，则可以推断给定字体不存在。列表中在元素上产生不同宽度或高度的第一种字体将是实际呈现的字体（注意：当回退字体“serif”位于

字体系列

列表中时，会涉及一种特殊情况）

---

还有一个Chrome版本的字体查找器。它的不同之处（）在于浏览器的回退字体似乎是“sans”-而不是“serif”。使用此方法的任何代码都必须具有浏览器特定的回退字体知识。

我不确定，但我认为浏览器从左到右搜索，并使用最先找到的字体。也许，我错了，我想自己知道答案。这是一个巧妙的技巧，如果firebug也能表现出来的话，我会喜欢的……是的，感觉应该有更好的方法。：）@亚历克斯：嗯，你可以随时抓取FF代码并逐步完成字体渲染代码。。那将是一个更好的方法；）@Damian我考虑过，但是复制和检查会更快。在Firebug中看到这个特性会很有趣。我想知道他们是如何找到当前字体的？是否有用于此的API，或者是否可以通过JavaScript实现？我知道你可能不知道答案，但我只是把它贴在这里，以防别人知道。谢谢。@grm因为我也很好奇，我看了一眼。我已经用我的发现更新了答案。谢谢你的帮助：）非常有趣！我把你的答案改成了正确的答案。