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

Question

我所拥有的是一个字体系列CSS声明，它首先使用程式化的Web字体，然后回退到系统字体。这样工作正常，但我的网络字体很大~15MB（中文字体），甚至在CDN上托管它需要5s才能加载。

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

但是，Chrome只是首先尝试使用网络字体（因为它首先列在font-family中），只显示一个空格，直到字体准备好呈现文字为止。

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

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

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

Answer 1

阅读完所有评论后，我现在有一个可接受的解决方案来逐步加载网络字体。

1. 如果可能，请使用字体的子集（包含您打算在页面上使用的所有字符/字形）。我没有成功尝试创建自己的子集，因为文件开始很大（字体squirrel有文件大小限制），但幸运的是，我可以使用谷歌的早期访问字体（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。