我所拥有的是一个字体系列CSS声明,它首先使用程式化的Web字体,然后回退到系统字体。这样工作正常,但我的网络字体很大~15MB(中文字体),甚至在CDN上托管它需要5s才能加载。
问题在于浏览器以不同方式处理显示。我认为Firefox有首选方法,即首先使用可用的字体(系统字体),并在准备好(加载)时逐步显示在网络字体中。
但是,Chrome只是首先尝试使用网络字体(因为它首先列在font-family中),只显示一个空格,直到字体准备好呈现文字为止。
有没有办法让Chrome的行为与Firefox相同?
编辑:添加字体系列声明。
font-family: "Noto Sans CJK TC", "Microsoft Yahei", "微软雅黑",
SimHei, "黑体", STHeiti, "华文黑体", sans-serif;
答案 0 :(得分:1)
阅读完所有评论后,我现在有一个可接受的解决方案来逐步加载网络字体。
font-family
CSS定义以使用网络安全字体。@font-face
个定义,并使用带事件处理的字体加载器逐步渲染字体(https://github.com/bramstein/fontfaceobserver)。当新加载的字体替换网页安全字体时,会有轻微的“弹出”,但至少没有FOIT(隐藏文字的闪光)。
https://www.filamentgroup.com/lab/font-events.html有一个很好的使用FontFaceObserver的指南,但无法使用它们的示例代码。相反,我使用了GitHub回购中的参考代码 - 尽管我认为他们的措辞是错误的/误导性的。如果您尚未实施Promise polyfill,则应使用fontfaceobserver.standalone.js
。