如何知道何时应用了字体

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 毫秒超时后触发可解决此问题。

有一个明显的跳跃，但通常有相同高度的东西，对于纯粹主义者来说，这可能并不完美，但它可以跨浏览器工作。