Question

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

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

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

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

最新的Firefox和Chrome已经出现了这个问题。 IE 8似乎没有问题，但是随后DOM-ready起火的时间相当晚，所以延迟有点内置我想：）

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

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

Answer 1

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

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

解决方案是不听DOMContentLoaded，而是去oldschool听取onreadystatechange并等到document.readyState === 'complete'总是在应用font-face之后触发（到目前为止）我可以通过我的测试来判断） - 这当然是IE中经常发生的事情，因为它不支持DOMContentLoaded。

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

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

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

Answer 2

在超时200ms后设置要触发的功能可以在使用Google字体时解决此问题。

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

Answer 3

ES6更新：

问题发布已经有很多年了， IE 的版本8仍然有效，甚至Ecmascript版本6都没有发布，但是现在您可以在document.fonts上编写回调事件。例如：

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

有关更多信息，请参见this post。

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

3 个答案:

ES6更新：