如何知道何时应用了font-face

Question

我目前正在为广泛使用自定义字体的客户构建公司网站.

在jQuerys DOM-ready上我正在进行位置计算,以确定应根据动态内容放置一些具有动态宽度和高度的弹出菜单.

这些计算失败,因为在应用font-face之前触发了DOM-ready,因此宽度和高度不正确.

现在(对于原型)我在DOM准备好500ms后进行计算以缓解这个问题,但由于显而易见的原因,这不能投入生产.

在最新的Firefox和Chrome中已经出现了这个问题.IE 8似乎没有问题,但是随后DOM-ready起火相当晚,所以延迟是内置的我猜:)

等待加载事件不是一个选项,所以我的问题是:

是否有可靠的跨浏览器方式来检测何时应用了font-face？

Answer 1

我想知道为什么IE不会遇到这个问题后找到了解决方案.

Firefox和Chrome/Safari会在DOMContentLoaded应用font-face之前触发事件,从而导致问题.

解决方案是不听,DOMContentLoaded而是去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
};

有关更多信息，请参阅此帖子。