一位做高端酒具的客户坚持要用一款设计感很强的付费字体，说这是品牌的一部分。上线后页面打开慢了两秒，字体文件三兆多，海外访客等它加载时页面一片空白。好看和速度真的只能二选一吗？网页前端开发的字体处理，其实有成熟的办法两头都保住。
字体为什么拖慢页面
先看体量：一款中文字体全量文件动辄三五兆，比整页代码还重；浏览器的策略又保守，字体没到位前文字先藏着或者先用备用字体顶着，页面就会闪一下，专业说法叫FOIT或FOUT，观感很掉价。更麻烦的是加载顺序：字体请求排在关键路径上，它不到位，页面就迟迟不肯把文字亮出来，速度观感双输。英文站点好一些，但全字重全字符集加载的浪费同样普遍，用到的只有几十个字符，下载的却是几万个。
三招把字体做轻
- 子集化：把实际用到的字挑出来单独打包，比如站名和标题就几十个字，文件从三兆压到十几KB，视觉一点不变；
- 按需加载：正文用系统字体，只给标题加载品牌字体的一款字重，别一款字体五六个字重全拉上；
- 加载策略：设置字体交换显示，先展示系统字体，品牌字体到位后无缝替换，访客永远看到的是内容，不是空白。
那位酒具客户按这三招处理完，字体负担从三兆降到六十KB，首屏时间回到一点五秒以内，品牌感照样在线。他的原话是：早知道这么简单，何苦纠结了两个月。子集化的工具都是现成的，把字体文件和用字清单交给技术方，半天办完，之后一劳永逸。
图标也在同一课里
顺带说图标。很多站把几十上百个图标打包成一个图标字体整包引入，实际用了十来个。换成SVG按需引用，用几个引几个，单个图标不到一KB，颜色还能随意调。整包图标的年代已经过去了，还在用整包的站点，性能账上都有笔糊涂钱。图标的观感细节也顺手提一下：线条粗细统一、和文字基线对齐，这些小事拼起来就是页面质感的差距。
网页前端开发的字体工作有个特点：一次性投入，长期白拿收益。子集化和加载策略做完就不需要再管，速度收益每天每访客都在兑现。
两条建议：让技术方把全站字体加载列个清单，哪些字体、多大体积、用在哪，清单一出浪费在哪一目了然；品牌字体必须用的，提前做子集化和降级方案再上线，别等访客流失了再补课。比格网络的项目字体都是按需处理过的，速度和观感从来不是二选一。
