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

Question

我得到的是一个字体系列 CSS 声明，首先使用程式化的 web 字体，然后回退到系统 fonts。这工作正常，但我的 web 字体很大~15MB（中文字体），甚至在 CDN 上托管它加载时间超过 5 秒。

问题在于浏览器处理显示的方式不同。 我认为 Firefox 有更好的方法，即使用最先可用的字体（系统字体），并在准备好（加载）时逐步显示在 web 字体中。

然而，Chrome 只是尝试首先使用 web 字体（因为它在字体系列中排在第一位）并且只显示一个空白区域，直到字体准备好呈现文本。

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

编辑：添加字体系列声明。

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

Answer 1

阅读完所有评论后，我现在有了一个可以接受的渐进式加载 Web 字体的解决方案。

1. 如果可能，请使用字体的子集（包含您打算在页面上使用的所有字符/字形）。 我尝试创建自己的子集没有成功，因为文件很大（字体松鼠有文件大小限制），但幸运的是，我可以使用谷歌早期访问字体（Noto Sans TC）中的一种字体。 文件大小从 15MB 增加到 2MB。
2. 上传到您的主机时使用 gzip 压缩（woff2/woff/eot 文件已经压缩或没有显示文件大小减少太多）。 我设法节省了 300K 这样做。
3. 最初设置您的font-family CSS 定义以使用网络安全字体。
4. 像往常一样定义你的@font-face定义，并使用带有事件处理的字体加载器来逐步渲染字体 ( https://github.com/bramstein/fontfaceobserver )。
5. Fontfaceobserver 向 HTML 元素添加类名，因此将其用于元素选择并使用加载的字体覆盖现有字体系列定义（将新字体系列添加到现有字体系列的前面）。

当新加载的字体替换网络安全字体时，会有轻微的“弹出”，但至少没有 FOIT（不可见文本的闪烁）。

https://www.filamentgroup.com/lab/font-events.html有一个关于使用 FontFaceObserver 的很好的指南，但无法让它与他们的示例代码一起工作。 相反，我使用了 GitHub 存储库中的参考代码 - 尽管我认为他们的措辞是错误的/误导性的。 如果你还没有实现 Promise polyfill，你应该使用fontfaceobserver.standalone.js 。

Answer 2

实现此目的的简单方法是添加

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

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