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

Question

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

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

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

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

该问题已在最新的 Firefox 和 chrome 中观察到。 IE 8 似乎没有问题，但是 DOM-ready 触发相当晚，所以我猜延迟是内置的:)

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

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

Answer 1

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

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

解决方案是不监听 DOMContentLoaded 而是老派监听 onreadystatechange 并等待 document.readyState === 'complete' 总是在应用 font-face 后触发(据我的测试所知)——这当然是 IE 中经常发生的事情，因为它不支持 DOMContentLoaded。

所以基本上您可以在名为 fontfaceapplied 的 jQuery 中滚动您自己的事件 - 也许它应该内置 ;)

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

有趣的事实:Opera 正确 并等待触发 DOMContentLoaded，直到应用 font-face。