如何延迟加载@ font -face声明的web字体？
我得到的是一个字体系列的CSS声明，它首先使用带样式的web字体，然后后退到系统字体。这很好用，但我的网页字体很大，大约15MB(中文字体)，即使是托管在CDN上也需要5秒以上的时间才能加载。
这样做的问题是浏览器处理显示的方式不同。我认为Firefox有更好的方式，那就是先使用任何可用的字体(系统字体)，然后在准备好(加载)时逐步显示在web字体中。
然而，Chrome只是尝试首先使用web字体(因为这在字体系列中是第一个列出的)，并且只显示一个空白区域，直到字体准备好呈现文本。
有没有办法让Chrome的行为跟Firefox一样？
编辑:添加font-family声明。
font-family: "Noto Sans CJK TC", "Microsoft Yahei", "微软雅黑",
SimHei, "黑体", STHeiti, "华文黑体", sans-serif;回答 2
Stack Overflow用户
发布于 2016-03-30 19:40:18
在阅读完所有评论后，我现在有了一个可以接受的逐步加载web字体的解决方案。
- 如果可能，请使用字体的子集(包含要在页面上使用的所有字符/字形)。我没有成功地创建自己的子集，因为文件一开始就很大(font squirrel有文件大小限制)，但幸运的是，我可以使用Google的早期访问字体(Noto Sans TC)中的字体。文件大小从15MB变为2MB。
- 在上传到您的主机时使用gzip压缩(woff2/woff/eot文件已经压缩或没有显示太多文件大小缩减)。通过这样做，我设法节省了300K。
- 将
font-familyCSS定义初始设置为使用网页安全字体。 - 将您的
@font-face定义定义为正常，并使用具有事件处理的字体加载器逐步呈现字体。
将类名添加到HTML元素中，因此将其用于元素选择并使用加载的字体覆盖现有字体系列定义(在现有字体系列的前面添加新的字体系列)。
当新加载的字体替换网页安全字体时，会有轻微的“弹出”，但至少没有FOIT (不可见文本的闪烁)。
https://www.filamentgroup.com/lab/font-events.html有一个关于使用FontFaceObserver的很好的指南，但无法让它与他们的示例代码一起工作。相反，我使用了GitHub代码库中的参考代码-尽管我认为他们的措辞是错误的/误导性的。如果您还没有实现Promise polyfill，则应该使用fontfaceobserver.standalone.js。
Stack Overflow用户
发布于 2022-02-10 13:58:40
实现这一点的简单方法是添加
@font-face {
font-display: swap;
}有关更多信息，请访问https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
https://stackoverflow.com/questions/36178001
复制相似问题
腾讯云开发者
