javascript - 交换 css 字体时是否发出 js 事件？

Question

我能否判断字体何时已成功(或以其他方式)加载，然后使用 JS 进行操作？

上下文

我正在使用 playwright 打印一系列文档。我目前正在加载这些字体 https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;600&display=swap 有时 waitUntil="networkidle" 将在字体加载之前完成 ½ 秒的等待，从而导致文档以后备字体打印。

引用资料

我读过 this: Controlling Font Performance with font-display和 this: Navigating & waiting ，并进行了大量搜索，但无济于事。

可能的解决方法

• 我可以将字体下载到我的计算机上，这样它就成为本地 Assets ，但这意味着如果我以后改变了对字体的想法，就需要记住一个额外的步骤。这也使得在远程机器上更难做到这一点。
• 我可以添加一个>4 秒的胖垫作为显式等待，但如果 N=文档数量(每 100 个文档 6½)，则运行时间会增加 4×N 秒
• 我可以编写一个 service worker 来预缓存字体，然后发出一个事件，但这比它应得的要多得多，而且管理它的生命周期似乎是一个痛苦的 future 。

有没有简单的方法？

Answer 1

是的，您可以使用 Font Face Observer 来执行此操作，它是一个小型的 @font-face 来监视字体的加载。这并不限制您使用任何类型的字体加载。

例如

var font = new FontFaceObserver('My Family', {
  weight: 400
});

font.load().then(function () {
  console.log('Font is available');
}, function () {
  console.log('Font is not available');
});

如果您想了解更多信息，请查看 https://portalzine.de/dev/options-to-detect-when-a-font-face-has-been-loaded/

希望这能回答您的问题。