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 ，人民邮电出版社