WebFont 三宗罪之一:WebFont 与 FOUT

2,237
WebFont 三宗罪之一:WebFont 与 FOUT
  • 5.00 / 5 5
5.00分(6票)
WebFont 三宗罪之一:WebFont 与 FOUT

四赴T.I.T 创意园面试,所学甚多。这篇文章是昨天面试中探讨的一个问题所延伸而来,现在都说WebFont 怎么好怎么好,让我们逆向思维,揭底WebFont 的一些缺点(劣势)。本文综合多篇文章来探讨WebFont 与 FOUT。

首先,神马是 FOUT

FOUC,即无样式内容闪烁(Flash of Unstyled Content),指的是 Web 字体在下载并渲染之前,短暂显示无样式文本的情况。它会严重影响用户体验,尤其是当字体样式渲染前后有明显不同的时候。这个名词是09 年的时候由一个老外提出命名的(见参考来源1),没办法人家英文WebFont 早早就流行了。

按照许多旧文章的描述,FOUT 在IE 浏览器跟部分低版本Firefox 上会有,但Jeff 认为这是错误的——因为当我脑海中有写“WebFont 与 FOUT”的文章的想法,它就给我蹦出一个活生生的例子:大名鼎鼎的腾讯ISUX 官方博客。各位可以前往其官博浏览下,注意下文字的内容(比如首页瀑布流下的文章标题及内页标题)。就算你是用Chrome,照样有之。为了防止日后美观的ISUX 官方博客改版,先截个动图:

如果你没有类似gif 截图的效果,那么我只能想到一个理由:哥们你家网速真快。

装逼般深入解析

首先先说下,腾讯ISUX 官方博客是全站WebFont 的,看源码采用的是来自国内的一个中文WebFont 网站的商业解决方案,而且形式上有些不同是采用JavaScript 动态加载的方式。将ISUX 作为本文的例子仅为解释FOUT 之用,无其他恶意成分(事实上ISUX 官方博客真心做的不错无论是设计还是内容本身)。

那么为什么会产生FOUT 呢?

这得扯到WebFont 的实现原理之@font-face 了,详细原因么,鄙人不才,不好意思我是来搬砖的:请先看下国外的一篇《@font-face and performance 》(中文翻译见这)。

该文的几个要点:

1、字体文件的下载不会阻滞其他文件下载。

2、跟其他静态文件一样,字体文件依然受同一域名下载限制的影响。

2、FOUT 在IE 中相对而言比较严重,甚至会导致页面白屏。

看完本文,大概的话得出的结论大概是:字体文件大,连接速度慢。

所以兜兜转转,回归到性能优化上了。

FOUT 尽可能般的解决方案

针对FOUT,《Web 性能实践日志》提出了一些解决方案,在这里就直接援引之:

1、将字体文件(或者说援引的CSS)托管到CDN(内容分发网络)。

2、Gzip 压缩所有字体文件,除了 .woff 字体。

3、增加缓存过期头来缓存字体。

4、从字体文件移除多余的字符(换而言之:按需使用)。

5、确保@font-face 是样式表中的第一个样式表的第一条规则(代码靠前)。

6、适当采用JavaScript 动态加载的方式(Typekit 跟Google 有个类似的方案Webfont Loader)。

后记

本文多多少少有点标题党的嫌疑(不然怎么吸引你看到这里捏:-D),请勿喷。如果有错误,欢迎指出并一齐探讨。

本文参考来源:

1. http://www.paulirish.com/2009/fighting-the-font-face-fout/

2.《Web 性能实践日志》p160 ,人民邮电出版社

暂时木有评论啊,等您坐沙发呢!

打破沉默,我来发表评论鸟~