精读《Web fonts: when you need them, when you don’t》

精读《Web fonts: when you need them, when you don’t》

一、文章核心观点

文章通过一张流程图及多个案例，深入分析了Web Fonts的优劣和具体使用场景，并着重探讨了如何解决Web Fonts带来的弊端，如FOUT（Flash Of Unstyled Text，未样式化文本闪烁）问题，以及提出了样式上优雅降级的几个方案。

二、Web Fonts的优势与案例

Web Fonts的优势在于能够提升网页的视觉效果和品牌一致性。文章通过维基百科利用字体提升阅读体验的案例，直观展示了Web Fonts在改善用户体验方面的作用。然而，对于中文开发者而言，Web Fonts的使用频率相对较低，因为汉字数量庞大，难以通过压缩获得性能提升。

三、中文环境下的Web Fonts使用

字体与品牌：对于需要特性字体的中文LOGO，通常使用PNG和SVG格式来解决，Web Font在中文环境下并不实用。
字体与阅读体验：在无大片聚集文字的情况下，使用无衬线字体（如微软雅黑）就能满足需求。对于中文的衬线字体，不同的字体带来的阅读体验虽有差别，但并非必须使用Web Font来提升。
跨设备字体一致性：在不同设备上显示一样的字体并非苛求，系统自带字体（如微软雅黑、Roboto）通常已经足够优秀，且针对移动设备有优化。
Web Font的愉悦感：在icon中使用iconfont确实带来了便利，但在文字上使用Web Font则显得多余，因为系统字体已经足够好用。

四、FOUT与FOIT问题及其解决方案

FOUT问题：Web Font异步加载导致的未样式化文本闪烁问题。文章指出，一个542KB的字体文件在第9秒才加载完成，之前只能以系统字体展示，加载完成后文字会突然跳动。
FOIT问题：更为极端的情况是Flash Of Invisible Text（FOIT），即浏览器直接隐藏未加载的Web Font文本，导致几百毫秒的时间滞后。
解决方案：
使用font-display属性：在声明@font-face时配合使用，可以选择隐藏（FOIT）、替换（FOUT）、先FOIT后FOUT等折中方案。
预加载字体：利用link的rel=preload属性进行预加载，使字体加载和CSS加载同时进行，提升速度。
使用JS库：如bramstein/fontfaceobserver等库支持Web Font的加载和检测。

五、FO*T问题的具体分析

FOT问题无法完全避免，但可以根据具体情况进行分析和处理。如果用户网速够快，隐藏文字可能更好；如果网速不确定且以文章为主，则先用替代字体显示；如果Web Font用于图标等，则选择隐藏以避免满屏方框。此外，如果字体授权费用高昂但用户端深受FOT折磨，则需要重新考虑是否使用Web Font。

六、结论

如果能解决FO*T的副作用，Web Font可以灵活使用。然而，由于中文字体庞大且常用西文字体（如Google字体库）时常被墙，对于中国开发者而言，Web Font的使用仍然面临诸多挑战。因此，在实际开发中需要权衡利弊，选择最适合的字体解决方案。

七、彩蛋

文章中的一段精彩话术指出，如果设计工具（如Sketch或Photoshop）在每次打开文件时延迟显示字体，那么世界上就没有那么多多余的字体了。这实际上是在强调字体选择的重要性以及避免过度使用不必要字体的必要性。

（注：以上图片为文章中的流程图，用于直观展示Web Fonts的使用场景和决策流程。）

热门标签