其实在项目中用中文字体子集化已经很久了，在刚接受到项目时真的让用户去下载全量字体的方式也早已被废除。如今终于有时间将它整理成文。算是对这件事情的一个基本了结吧。

为什么要截取字体？

众所周知，相对于英文字体，中文字体就是一个“庞然大物”。英文字体 200～300KB 已经很大了，而中文字体 动戈 10~30MB。
这主要是两个方面的原因：

1. 中文字体包含的字形数量极多 英文字体则只需包含几十个基本字符和符号。有些中文字体还要包括韩语和日语的字形。
2. 中文字形的曲折变化复杂度高，用于控制中文字形曲线的控制点普遍比英文更多，由于数据量不一样，字体大小也自然就有这样的膨胀了

但是需求总是有的，在一些特殊的视觉效果，或者是在一些富文本（如海报设计类）的编辑场景下，特殊字体的支持更是必不可少的。 但是一个中文字体 10～20Mb 我网站可能支持100种字体，你让用户都全量下载显然是不可能的！并且也不是每个页面都会用到一个字体文件中的所有字符，全量加载本身也极其浪费。

在《通用汉字表》中一级表确定 3500 常用中文汉字（中国义务教育9年级需要掌握的汉字数量）即可覆盖日常使用汉字的99.8%

如何使用自定义字体。

在真正开始之前，我们先来回顾一下，如何去让一个文本使用自定义字体。这里我们会聊到 @font-face，这就是我们目前前端最常用的Web自定义字体技术。

示例代码：https://css-tricks.com/snippets/css/using-font-face/
这里取了其中一个最全的方案，基本上能够兼容到所有的浏览器。

1
2
3
4
5
6
7
8
9
10
11
12
13

@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 */
}
<!--使用-->
.newfont {
    font-family: 'MyWebFont';
}

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

使用 google open font （360 奇舞 cdn 的 google font 镜像）

1
2
3
4
5
6
7
8

// 导入
@import url(//fonts.googleapis.com/css?family=Open+Sans);
// 或者引用
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
// 实际使用
body {
  font-family: 'Open Sans', sans-serif;
}

关于字体如何使用就简单介绍到这，网上也已经有很多各种各样的教程。不再过多赘述。 其实目前 iconfont.cn 这类字体图标的网站就是这样的技术。

字体如何截取？

1. unicode-range

unicode-range 是一个 CSS 属性，一般和 @font-face 规则一起使用。它只是在本地既有字体或者浏览器已经下载的字体基础上做一个指向子集的“软链接”，并不能真正减小浏览器下载文件的大小。

对于这种技术由于并不能真正的减少字体大小，所以也不在这我篇文章的范围内。给两个参考链接给大家观看了解。

• 前端字体截取：实战篇
• 张鑫旭 - CSS unicode-range特定字符使用font-face自定义字体

2. 全量字体精简

即在服务端从“全量”字体中分离出一个体积相对极小的字体子集，做成 webfont 通过...