如何知道何時應用了字體

Question

我目前正在為廣泛使用自定義 fonts 的客戶構建公司網站。

在 jQuerys DOM-ready 上，我正在進行放置計算，以根據動態內容確定一些具有動態寬度和高度的彈出菜單應放置在何處。

這些計算失敗，因為 DOM-ready 在應用 font-face 之前被觸發，因此寬度和高度不正確。

現在（對於原型）我正在 DOM 准備好后 500 毫秒進行計算以緩解這個問題，但是由於顯而易見的原因，這不能 go 投入生產。

該問題已在最新的 Firefox 和 chrome 中觀察到。 IE 8 似乎沒有問題，但是 DOM-ready 觸發相當晚，所以我猜延遲是內置的:)

等待加載事件不是一種選擇，所以我的問題是：

是否有可靠的跨瀏覽器方法來檢測何時應用了字體？

Answer 1

在想知道為什么 IE 不會遇到此問題后，我找到了解決方案。

Firefox 和 Chrome/Safari 在應用 font-face 之前觸發DOMContentLoaded事件，從而導致問題。

解決方案是不聽DOMContentLoaded而是聽 go oldschool 並聽onreadystatechange並等到document.readyState === 'complete'總是在應用 font-face 后觸發（據我的測試所知） - 這當然是 IE 中總是發生的事情，因為它不支持DOMContentLoaded 。

所以基本上你可以在 jQuery 中滾動你自己的事件，稱為fontfaceapplied - 也許它應該內置；）

document.onreadystatechange = function() {
    if (document.readyState === 'complete') 
        $(document).trigger('fontfaceapplied');
};

有趣的事實：Opera 做對了並等待觸發DOMContentLoaded直到應用 font-face。

Answer 2

ES6 更新：

問題帖是多年前IE 8 及更早版本還活着，甚至Ecmascript 6 版還沒有發布，但現在你可以在document.fonts事件上編寫回調。 例如：

document.fonts.onloadingdone = () => {
  // do something after all fonts are loaded
};

有關更多信息，請參閱這篇文章。

Answer 3

在使用 Google Fonts 時，將 function 設置為在 200 毫秒超時后觸發可解決此問題。

有一個明顯的跳躍，但通常有相同高度的東西，對於純粹主義者來說，這可能並不完美，但它可以跨瀏覽器工作。