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

Question

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

语境

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

参考

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

可能的解决方法

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

有没有简单的方法？

标签： javascriptcssgoogle-chromefontsplaywright

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/

希望能回答你的问题。