答案 0 :(得分:7)
你提出了两个不同的问题。
下载实际字体文件的延迟基本上是不可避免的,尽管您可以通过不包括任何您实际不需要的内容来帮助它,以便最大限度地减少文件大小。根据您使用的服务/方法,这可能需要减少您包含的字符集(/语言),以及权重和样式。
至于无格式文本的闪现,这是半不可避免的,部分原因是上面的下载时间问题。但是,一旦你尽可能地减少了它,你应该实现一个字体加载器来更好地控制这个部分。这是TypeKit's (open-sourced) implementation和brief explanatory blog post。底部的例子专门针对FOUT;你几乎可以将它放入你自己的代码中 以下是使用Google加载程序及其服务的一些information from FontDeck,这也将导致将其用于Google的WebFonts服务。
任何其他服务,您必须开始自己的研究,但这些是一般概念。使用这些工具,您可以使用一些脚本和CSS规则来隐藏受影响的文本,直到字体准备好呈现,以及其他一些用途。这不是完全的想法,但至少可以阻止FOUT。一旦超过该初始时间,浏览器的缓存应该接管并使其在很大程度上没有实际意义。
答案 1 :(得分:0)
A)通过正确设置Cache-Control和Content-Type来缓存字体:
Cache-Control:public, max-age=15552000
Content-Type:application/x-font-woff;charset=UTF-8 (differs for other font files)
B)避免使用https for Vary Header。仅设置Accet-Encoding。 变化:https breaks IE font loading.
Vary:Accept-Encoding
https://github.com/typekit/webfontloader
C)当浏览器已经加载了字体时,A和B应该在第一个请求后完美地工作。如果这还不够,请尝试Web Font Loader。