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

我可以判断字体何时已成功（或以其他方式）加载，然后使用 JS 进行操作吗？

Context

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

参考

我读过this：使用 font-display 控制字体性能 https://developers.google.com/web/updates/2016/02/font-display and this：导航和等待 https://www.checklyhq.com/learn/headless/basics-navigation/，并进行了很多搜索，但没有结果。

可能的解决方法

• 我可以将字体下载到我的计算机上，这样它就成为本地资产，但这意味着如果我将来改变对字体的想法，请记住一个额外的步骤。这也使得在远程计算机上执行操作变得更加困难。
• 我可以添加 >4 秒的厚垫作为显式等待，但是如果 N= 文档数量（每 100 个文档 6½），则会增加 4×N 秒的运行时间
• 我可以编写一个服务工作人员来预缓存字体，然后发出一个事件，但这比应有的工作量要多，而且管理其生命周期似乎是一个痛苦的未来。

有简单的方法吗？

是的，你可以使用 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/ https://portalzine.de/dev/options-to-detect-when-a-font-face-has-been-loaded/

希望能回答您的问题。