当我看到一个
HTML元素的字体系列(从js,firebug或类似的)它总是一个列表.如何从列表中查看实际使用的字体？
解决方法
Firefox的
Font Finder附件可以做到这一点.由于它显然是可行的,如果这是内置于Firebug的话,那肯定会很方便.
2012/2/4更新：
我检查了字体查找器源,以了解它的工作原理,这实际上是一个聪明的小黑客.相关代码位于fontfinder.js中的Detector class中.引用来源：
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
它的作用就像Marcel’s answer的自动化版本.
那么它的作用是将一个虚拟元素(文本“mmmmmmmmmmlil”)添加到DOM中.它设置为使用浏览器后备字体“serif”,字体大小为72px.在这种情况下,Font Finder知道使用后备字体时元素的宽度和高度.接下来,它只是遍历font-family中列出的所有字体,依次为列表中的每个字体设置元素上的字体.如果元素的宽度和高度与设置后备字体的宽度和高度相匹配,我们可以推断给定的字体不存在.列表中第一个在该元素上生成不同宽度或高度的字体将是实际呈现的字体(注意：当后退字体“serif”在font-family列表中时,会出现特殊情况).
还有一个Chrome版本的字体查找器.它的不同之处在于(relevant source)浏览器后备字体似乎是“sans”,而不是“serif”.使用这种方法的任何代码都必须具有浏览器特定的后备字体知识.
