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 条评论
登录 后参与评论

相关文章

来自专栏糊一笑

Taro开发微信小程序之初体验

4362
来自专栏SAP最佳业务实践

SAP最佳业务实践:使用看板的生产制造(233)-11重复制造反冲

1、MFBF重复制造反冲 此活动在单个步骤中执行多个活动,如产成品的收货、组件物料的反冲、成本到成本收集器的过帐以及物料和会计凭证的创建。 反冲时可能会出现错误...

3395
来自专栏前端新视界

如何编写轻量级 CSS 框架

Github: https://github.com/nzbin/snack Docs:  https://nzbin.github.io/snack 前言...

26510
来自专栏知晓程序

只要 5 分钟,让你立刻拥有自己的小程序 | 知晓云

Hello,各位知晓程序的读者们,我是犯迷糊的小羊。目前是 ifanr 的一只前端攻城狮,同时也是知晓云团队的一员。

1233
来自专栏王鹤的专栏

基于 TVUE 框架在中型移动端项目的直出同构实践

TVUE 框架是在 vuejs 框架基础上结合业务本身做的一系列优化,封装,改进的框架实践。本文只阐述和直出同构相关部分的内容,其它框架内的内容另行介绍。

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

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

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

982
来自专栏互联网杂技

你知道吗?Web的26项基本概念和技术

Web 开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行。今天,本文向初学者介绍一些 Web 开发中的基本概念和用到的技术,从...

34810
来自专栏移动开发之家

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

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

892
来自专栏拂晓风起

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

1993
来自专栏猿人谷

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

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

1879

扫码关注云+社区