避免延迟加载font-face

时间:2012-07-20 12:51:08

标签: html css

是否有任何实际的方法可以避免延迟加载font-face?

来自Paul Irish about this FOUT的博客文章(无文字的文字)。它来自2009年。

过去3年有没有进展?

2 个答案:

答案 0 :(得分:7)

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

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

至于无格式文本的闪现,这是半不可避免的,部分原因是上面的下载时间问题。但是,一旦你尽可能地减少了它,你应该实现一个字体加载器来更好地控制这个部分。这是TypeKit's (open-sourced) implementationbrief 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