又想用好看的自定义字体，又想优化字体包大小，现在这个问题可以解决了，快来看看字蛛(font-spider)是怎么实现的...
写在前面的话：
字蛛的工作原理是把页面上用到的文字从字体包中提取出来打包成同名的新字体包。压缩阶段没有出现过的文字，则新字体包中不会包含。
需要工具：
- [x] node、npm 环境
- [x] font-spider npm 包
- [x] 待压缩的字体包
- [x] 需要使用字体的网页
操作步骤：
1、安装 node ,npm
下载 Nodejs https://nodejs.org/en/download/
安装的时候选择 add to PATH 这样 node npm 模板都安装了
安装完毕后，输入 cmd 后敲回车，在打开的命令行界面，依次输入命令：
node -v
npm -v
如果正确输出版本号，说明我们的 NodeJS 和 NPM 就安装好了
2、全局安装 font-spider
打开运行命令框输入cmd，进入dos环境
执行 npm install font-spider -g出现如图所示信息即安装成功：
3、准备待压缩的字体包
pbold.ttf 10668k
pmedium.ttf 10712k4、压缩字体文件
新建一个文件夹，文件夹中新建一个 html 文件复制下方代码，并把上一步的字体放到 html 同级的文件夹
zip（文件夹）
|---index.html
|---pbold.ttf
|---pmedium.ttf<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>字蛛压缩字体</title>
</head>
<style>
@font-face {
font-family: "pBold";
src: url("pbold.ttf");
}
@font-face {
font-family: "pMedium";
src: url("pmedium.ttf");
}
.btn1 {
color: #ff7139;
background: #fff;
font-size: 18px;
font-family: "pBold";
}
</style>
<body>
<div class="div1">要使用字体包的文字</div>
</body>
</html>打开运行命令框输入cmd，进入dos环境
执行 font-spider index.html成功压缩以后文件目录结构变为了：
zip（文件夹）
|---index.html
|---pbold.ttf
|---pmedium.ttf
|---.font-spider
|---|---pbold.ttf
|---|---pmedium.ttf至此，字蛛压缩字体完成。