避免延迟加载font-face

Den*_*ler 15 html css

有没有任何实际的方法来避免font-face的延迟加载?

保罗爱尔兰有一篇关于这个FOUT 的博客文章(无文字的文字).它从2009年开始.

过去3年有没有进步?

Su'*_*Su' 8

你提出了两个不同的问题.

下载实际字体文件的延迟基本上是不可避免的,尽管您可以通过不包括任何您实际不需要的内容来帮助它,以便最大限度地减少文件大小.根据您使用的服务/方法,这可能需要减少您包含的字符集(/语言),以及权重和样式.

至于无格式文本的闪现,这是半不可避免的,部分原因是上面的下载时间问题.但是,一旦你尽可能地减少了它,你应该实现一个字体加载器来更好地控制这个部分.这是TypeKit的(开源)实现,以及一个简短的解释性博客文章.底部的例子专门针对FOUT; 你几乎可以将它放入你自己的代码中.
以下是FontDeck关于使用Google加载器及其服务的一些信息,这些信息也将导致将其用于Google的WebFonts服务.

任何其他服务,你必须开始自己的研究,但这些是一般概念.使用这些工具,您可以使用一些脚本和CSS规则来隐藏受影响的文本,直到字体准备好呈现,以及其他一些用途.这不是完全的想法,但至少可以阻止FOUT.一旦超过该初始时间,浏览器的缓存应该接管并使其基本上没有实际意义.

  • `try {Typekit.load();}来自TypeKit实现的catch(e){}`几乎说明了 - 在脚本运行之前文档不会呈现,如果你不介意让你的用户等一下时间量(希望以毫秒为单位)然后这可行...如果您关心尽可能快地使您的页面,这不起作用.(...如果用户没有长时间坚持看到你的网站*完成*加载,那么你的网站看起来并不重要:) (4认同)