如何知道字体已被应用

How to know when font-face has been applied

本文关键字：应用 字体 何知道      更新时间：2023-09-26

我目前正在为一个客户建立一个企业网站，该客户广泛使用自定义字体。

在jquery DOM-ready上，我正在做位置计算，以找出一些具有动态宽度和高度的弹出菜单应该根据其动态内容放置的位置。

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

现在(对于原型)，我在DOM-ready后500毫秒进行计算，以缓解这个问题，但由于明显的原因，这不能投入生产。

这个问题已经在最新的Firefox和chrome中被观察到。IE 8似乎没有这个问题，但是DOM-ready很晚才启动，所以我猜延迟是内建的:)

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

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

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

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

解决方案是不听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应用

ES6 update:

这个问题是许多年前的IEs版本8和更早的版本还活着，甚至Ecmascript版本6还没有发布，但是现在你可以在document.fonts事件上写回调。如:

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

>

设置该函数在超时200ms后触发可以解决使用Google Fonts时的此问题。

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

相关文章：