如何知道何时应用了字体答案

【问题标题】：How to know when font-face has been applied如何知道何时应用了字体
【发布时间】：2020-03-04 06:08:19
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

好吧，我不确定这是否会有所帮助，但不要在 document.ready 上做你的魔法，而是尝试在 window.load 上做。它会在加载图像等时稍后触发，但可能会有一些字体闪烁，这似乎是不可取的。
正如我已经说过的，等待加载事件不是一种选择。
好的，那你用什么来应用字体呢？有一些库可以做这种事情，这些事情可能已经在正确的地方触发了适当的事件。我记得很少有 Cufon、FLIR 和 SIFR 专门用于处理字体替换，如果他们没有设法解决上述问题，我会感到惊讶！
自定义字体通过 css 应用，使用 @font-face 进行定义（fontspring 语法）和 font-family 声明。 Javascript 不是其中的一部分。
测试字体字符串宽度以确定字体是否可见的 JavaScript 解决方案：stackoverflow.com/questions/12312323/…

标签： javascript jquery font-face domready

【解决方案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。

【讨论】：

+1。唔。非常有趣，并且进行了大量的研究。感谢您的分享。我将不得不记住这一点。（顺便说一句，我在不久的将来感觉到“自学”徽章...... ;-)）
很好的答案，但是我发现 Chrome (16.0.912.77) 会报告 readystate 是“完成”，即使没有应用字体。更准确地说，如果它已被应用，如果您尝试在诸如 Canvas 上下文之类的东西中使用它，它不一定可用。另外，我刚刚陷入了一个陷阱，jQuery 不会等到“完成”才触发其就绪事件，如果状态为“交互式”，它也会触发
@tapi: jQuerys 就绪事件监听 DOMContentLoaded，所以在使用自定义字体时它是无用的。

【解决方案2】：

ES6 更新：

问题帖子是多年前的 IE 版本 8 及更早版本仍然存在，甚至 Ecmascript 版本 6 尚未发布，但现在您可以在 document.fonts 事件上编写回调。例如：

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

更多信息请见this post。

【讨论】：

【解决方案3】：

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

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

【讨论】：