前端字体截取技术，做炫酷网站再也不用怕中文字体数据量大啦！【实战】

众所周知，相对于英文字体，中文字体天生是“庞然大物”。英文字体两三百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标准语法。

前端学习qun：784-783-012，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

Web字体与@font-face

为了超越“Web安全字体”的局限，在网页上使用一些用户电脑上不太可能会安装的字体，微软曾率先提出了 @font-face 规则。这个规则后来进入W3C的 CSS Fonts Module Level 3 模块，于是就有了前端常用的Web自定义字体技术：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* 兼容IE9 */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* 最新浏览器 */
       url('webfont.woff') format('woff'), /* 较新浏览器 */
       url('webfont.ttf')  format('truetype'), /* Safari、Android、iOS */
       url('webfont.svg#svgFontName') format('svg'); /* 早期iOS */

当然，上面的代码是几乎可以兼容所有浏览器的方案。大约在两年前，也就是2016年，由于浏览器版本的快速更迭，写成下面这样已经是比较现实的了：

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

如果要兼容更多浏览器，那再加上一种几乎所有浏览器都支持的 ttf 格式则似乎更稳妥：

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

不过，我们的最终目标还是写成这样，即只使用 woff2 这种自带压缩的格式：

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
}

从技术角度讲，除了直接使用 @font-face ，还可以使用 @import 规则或 link 元素导入或加载包含 @font-face 声明的外部文件：

// 导入
@import url(//fonts.googleapis.com/css?family=Open+Sans);
// 或者引用
<link href='//fonts.go