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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

触发「对方正在输入…」,你需要这么做 | 晓技巧

21540
来自专栏一个番茄说

iOS 开发安全那些事儿

​ 随着移动互联网的普及,被越来越多的心怀不轨的人觊觎,也越来越多的安全问题暴露了出来。开发者开发出来的应用被安装在设备上之后,用户并不具有专业的安全知识。...

12930
来自专栏拂晓风起

cocos2d-js V3.0 V3.1使用DragonBones

24330
来自专栏猿人谷

新安装 Ubuntu 12.10 需要做的 10 件事

1. 了解一下ubuntu 12.10 ubuntu 12.10 使用 unity 桌面基于gtk3 开发的桌面,新版本原装加入连个lens但是对于国内用户来说...

21690
来自专栏用户2442861的专栏

必不可少的Firefox插件

Adblock Plus 去广告,包括youku的开头广告 All-in-One Sidebar 最大的好处就是省去书签栏 NoSquint :用firefo...

80510
来自专栏一“技”之长

AppleWatch开发入门一——Watch的开发思路与应用框架

        Apple Watch无疑是apple在智能手表领域的一次革命,如何在Watch上开发出实用且具有美感的应用,是iOS开发者们开始思考的一个问题...

17020
来自专栏移动开发之家

移动端跨平台开发的深度解析

跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,...

11020
来自专栏WeTest质量开放平台团队的专栏

安卓易学,爬坑不易——腾讯老司机的RecyclerView局部刷新爬坑之路

安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人。下面让我们看看腾讯开发工程师用实例讲解自己踩坑时的...

12020
来自专栏冰霜之地

Vue 全家桶 + Electron 开发的一个跨三端的应用

我是一名全职的 iOS 开发者,非前端开发者。由于接触了 Weex 开发,从而接触到了 Vue.js。

41870
来自专栏鹅厂优文

开发效率太低?您可能没看这篇文章

还记得刚参加工作的时候, 有位开发的同事软件使用效率奇高. 我曾亲眼目睹他在几秒之内打开开发软件, 优雅地调出隐藏的功能, 输入数据输出结果的过程行云流水, 一...

78220

扫码关注云+社区

领取腾讯云代金券