为什么要截取字体？

众所周知，相对于英文字体，中文字体天生是“庞然大物”。英文字体两三百KB已经很大了，而中文字体几MB十几MB都算小的。一方面，中文字体包含的字形数量极多，动辄数以千计甚至万计，而英文字体则只需包含几十个基本字符和符号，哪怕支持多种语言及字符变体，容量达到三千多个字形已经算非常庞大的了。另一方面，中文字形的曲折变化复杂度高，在基于轮廓的矢量字体设计中，用于控制中文字形曲线的控制点普遍比英文更多，因而需要的数据量更大，也会导致字体文件膨胀。

前端开发实践中，为了实现一些特殊视觉效果，经常需要使用某些特殊字体，而用户电脑上几乎不太可能安装这些字体，这时候通常需要使用Web字体技术，让浏览器动态下载我们的自定义字体。可是中文字体非常庞大，很多时候“全量”加载某个字体文件是不现实的。特别是对于一些动态页面且每个页面只有少量字符用到该字体的情况下。当然，也不是每个页面都会用到一个字体文件中的所有字符，全量加载本身也极其浪费。

研究表明，3500常用中文汉字（中国义务教育9年级需要掌握的汉字数量）即可覆盖日常使用汉字的99.8%：

• 500 字（78.53202%）
• 1000字（91.91527%）
• 1500字（96.47563%）
• 2000字（98.38765%）
• 2500字（99.24388%）
• 3000字（99.63322%）
• 3500字（99.82015%）

可见，最常用的前500个汉字的覆盖率已经达到78%。因此，“全量”加载某个字体，特别是中文字体，在当前网络环境下不仅浪费流量和时间，而且也是完全没有必要的。这时候，我们可以根据网页用到的字符来截取字体的片段，这个技术英文叫subset，也就是“取子集”。

本文首先简单回顾Web自定义字体的技术规范，然后通过实例介绍两种前端常用的截取字体的技术。首先是CSS中的unicode-range属性，我们称之为“软截取技术”，因为它只是在本地既有字体或者浏览器已经下载的字体基础上做一个指向子集的“软链接”，并不能真正减小浏览器下载文件的大小。其次是Node命令行工具glyphhanger，我们称之为“硬截取技术”，即在服务端从“全量”字体中分离出一个体积相对极小的字体子集，做成Web字体通过Web服务器或CDN下发给浏览器。

无论是“软截取”，还是“硬截取”，都会用到Web字体和@font-face规则。因此，我们需要先来了解一下这个基础的Web标准语法。

- 阅读剩余部分 -