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

Question

当我查看HTML元素的字体系列(来自js,firebug或类似文件)时,它总是一个列表.如何从列表中查看实际使用的字体？

Answer 1

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

Answer 2

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

Answer 3

Firefox 的Font Finder插件可以做到这一点。由于它\xe2\x80\x99s显然是可能的，如果将其内置到Firebug中肯定会很方便。

\n\n

\n\n\n\n

2012年2月4日更新：

\n\n

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

\n\n

\n

用于确定呈现哪种字体的内部类。当给定足够大的字体大小和示例字符串时，它的运行基础是每种字体都有唯一的高度和宽度

\n

\n\n

\xe2\x80\x99s 它所做的几乎就像Marcel\xe2\x80\x99s 答案的自动版本。\n所以它的工作原理是一个虚拟元素 \xe2\x80\x94 与文本 \xe2\x80\x9cmmmmmmmmmmlil \xe2\x80\x9d \xe2\x80\x94 被添加到 DOM 中。它设置为使用浏览器后备字体 \xe2\x80\x9cserif\xe2\x80\x9d，字体大小为 72px。这样，当使用后备字体时，字体查找器就知道元素的宽度和高度。接下来，它只是迭代 中列出的所有字体font-family，依次为列表中的每一种元素设置字体。如果元素的宽度和高度与设置后备字体时的宽度和高度匹配，我们可以推断给定的字体不存在。列表中在元素上产生不同宽度或高度的第一个字体将是实际渲染的字体（注意：当后备字体 \xe2\x80\x9cserif、\xe2\x80 \x9d 在font-family列表中）。

\n\n

还有一个 Chrome 版本的 Font Finder。它的不同之处（相关来源）在于浏览器后备字体似乎是 \xe2\x80\x9csans\xe2\x80\x9d \xe2\x80\x94 而不是 \xe2\x80\x9cserif。\xe2\x80\x9d 使用的任何代码此方法必须具有特定于浏览器的后备字体知识。

\n