我怎樣才能真正看到元素正在使用什麼字體？

當我查看HTML元素的font-family（來自js，firebug或類似的）時，它總是一個列表。如何從列表中查看實際使用哪種字體？我怎樣才能真正看到元素正在使用什麼字體？

來源

2011-05-12 grm

我不確定，但我認爲瀏覽器從左到右搜索並使用第一個找到的字體。也許，我錯了，想自己知道答案。 – 2011-05-12 06:54:09

Firefox的Font Finder附加組件可以做到這一點。由於這顯然是可能的，所以如果將其內置到Firebug中，它確實會很方便。

Font Finder window

更新2012年2月4日：

我檢查了字體查找根源，找出它是如何工作的，它實際上是一個聰明的小黑客。相關的代碼位於Detector class的fontfinder.js。引用來源：

用於確定呈現哪種字體的內部類。它給出一個足夠大的字體大小&樣本串

它是什麼做的是幾乎一樣的Marcel’s answer的自動版本時，每個字體具有獨特的高度& 寬度的基礎下進行操作。所以它的工作原理是將一個虛擬元素（文本「mmmmmmmmmmlil」）添加到DOM中。它設置爲使用瀏覽器後備字體「serif」，字體大小爲72px。據此，字體搜索器在回退字體正在使用時知道元素的寬度和高度。接下來，它只是遍歷font-family中列出的所有字體，並依次爲列表中的每一個字體設置元素的字體。如果元素的寬度和高度與設置備用字體時的寬度和高度相匹配，我們可以推斷給定的字體不存在。列表中第一個產生不同寬度或高度的字體將是實際呈現的字體（注意：當回退字體「serif」位於font-family列表中時，會涉及一個特殊情況）。

還有一個Chrome版本的Font Finder。它與（relevant source）的區別在於瀏覽器後備字體顯示爲「sans」 - 不是「serif」。使用此方法的任何代碼都必須具有瀏覽器特有的後備字體知識。

來源

2012-02-01 17:15:04

在Firebug中看到這個特性會很有趣。我不知道他們是如何找到當前字體的？有沒有一個API或從JavaScript可能？我知道你可能不知道答案，但我只是在別人知道的情況下將其發佈在這裏。謝謝。 – grm 2012-02-02 10:52:51

@grm因爲我也很好奇，所以我看了一下。我用我發現的更新了答案。 – 2012-02-05 05:47:31

感謝您的幫助:)非常有趣！我將您的解決方案改爲正確答案。 – grm 2012-02-06 10:13:15

我意識到這並不理想，但是您可以複製視口中的文本並將其粘貼到富文本編輯器中，它會告訴您。

來源

2011-05-12 06:53:41 alex

狡猾的...... :) +1 – 2011-05-12 06:55:18

這是一個巧妙的伎倆，會喜歡它，雖然如果螢火蟲本來能夠顯示它... – Raybiez 2011-05-12 06:56:00

是的，感覺應該有更好的方法。 :) – alex 2011-05-12 06:59:38

它有點煩瑣，但使用Firebug，你可以調整字體族中每個字體的名稱，從左到右工作，直到元素的字體改變，這意味着它是你改變的最後一個字體被使用。至少在最新的Firebug上，您只需添加或刪除字體名稱中的字母，以便反映更改。

來源

2011-05-12 06:54:22 Marcel

我怎樣才能真正看到元素正在使用什麼字體？

回答

相關問題