36

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

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

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

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

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

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

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

4

3 回答 3

57

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

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

解决方案是不听，DOMContentLoaded而是去老学校听，onreadystatechange然后等到document.readyState === 'complete'应用 font-face 后总是触发的（据我的测试可知）——这当然是 IE 中总是发生的事情，因为它不支持DOMContentLoaded。

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

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

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

于 2011-07-13T12:29:08.413 回答
9

ES6 更新：

问题帖是多年前IE的 8 版及更早版本还活着，甚至 Ecmascript 6 版还没有发布，但现在您可以编写document.fonts事件回调。例如：

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

有关更多信息，请参阅这篇文章。

于 2020-03-03T22:08:19.797 回答
0

将函数设置为在 200 毫秒超时后触发可以解决使用 Google 字体时的此问题。

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

于 2014-03-27T17:52:07.840 回答