如何延迟加载由@font-face声明的Web字体？

Question

我所拥有的是一个 font-family CSS 声明，用于首选使用风格化的 Web 字体，然后回退到系统字体。这个方法虽然有效，但我的 Web 字体非常大，约 15MB（中文字体），即使将其托管在 CDN 上，加载时间也超过了 5 秒。

问题在于不同浏览器处理显示方式不同。我认为 Firefox 有首选方式，即先使用可用的字体（系统字体），并在准备好时（加载完成）逐渐显示 Web 字体。

然而，Chrome 只尝试首先使用 Web 字体（因为它在 font-family 中排名第一），并在字体准备好渲染文本时显示空白空间。

有没有办法使 Chrome 的行为与 Firefox 相同？

编辑：添加 font-family 声明。

font-family: "Noto Sans CJK TC", "Microsoft Yahei", "微软雅黑",
             SimHei, "黑体", STHeiti, "华文黑体", sans-serif;

- Trung Nguyen

---

你有没有备用字体规则？也就是font-family: '中文字体', sans-serif。 - undefined

您可以异步加载具有font的CSS文件。 - undefined

这篇文章对你很有用。我猜这个话题在stackoverflow上太宽泛了，但如果有人能够不从这个链接中复制粘贴地解释给你听会更好。祝你好运！ - undefined

这是一个有关编程的内容，从英文翻译成中文。只返回翻译后的文本：https://dev.opera.com/articles/better-font-face/ 这也很有用。 - undefined

谢谢你的建议，现在我有一些阅读要做^^ - undefined

你的内容没有使用完整的15MB - 花些时间找一个好的构建工具，让你能够进行高效的字体子集化。 - undefined

Answer 1

阅读了所有评论后，我现在有一个可行的解决方案来逐步加载Web字体。

1. 如果可能的话，请使用字体的子集（具有您打算在页面上使用的所有字符/字形）。我尝试创建自己的子集时没有成功，因为文件一开始就很大（font squirrel有文件大小限制），但幸运的是，有一个字体我可以从Google的早期访问字体（Noto Sans TC）中使用。文件大小从15MB减小到2MB。
2. 上传到主机时使用gzip压缩（woff2 / woff / eot文件已经被压缩或没有显示太多文件大小减小）。我通过这样做节省了300K。
3. 最初将font-family CSS定义设置为使用Web安全字体。
4. 正常定义您的@font-face定义，并使用带有事件处理的字体加载器逐步呈现字体（https://github.com/bramstein/fontfaceobserver）。
5. Fontfaceobserver向HTML元素添加类名，因此请使用此类进行元素选择，并使用加载的字体覆盖现有的font-family定义（将新字体族添加到现有字体族的前面）。

当新加载的字体替换Web安全字体时会出现轻微的“弹出”效果，但至少没有FOIT（不可见文本的闪烁）。 https://www.filamentgroup.com/lab/font-events.html有一个关于使用FontFaceObserver的好指南，但无法使用其示例代码。相反，我使用了GitHub存储库中的参考代码-尽管我认为他们的措辞是错误/误导性的。如果您还没有实现Promise polyfill，则应使用fontfaceobserver.standalone.js。

- Trung Nguyen

Answer 2

简单的方法是添加以下内容来实现：

@font-face {
    font-display: swap;
}

了解更多信息，请访问https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

- Jehad Ahmad Jaghoub