我们如果使用自定义的字体会写如下代码
@font-face {
font-family: 方正正粗黑简体;
src: url("@/assets/css/font/方正正粗黑简体.TTF");
}
.title{
font-family: 方正正粗黑简体;
}
引入的字体文件通常好几MB，用font-spider可以把页面使用到的字体保留，没用的的字体删除，从而达到精简字体库的目的。
全局安装font-spider
npm install font-spider -g
安装完后执行font-spider --version 查看是否成功安装。
压缩目录的时候不要在原有项目里面，新建个文件夹font-spider，把要压缩的字体放进去，并新建一个index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>font spider</title>
<style>
@font-face {
font-family: '方正正粗黑简体';
src: url('./方正正粗黑简体.eot');
src:
url('./方正正粗黑简体.eot?#font-spider') format('embedded-opentype'),
url('./方正正粗黑简体.woff') format('woff'),
url('./方正正粗黑简体.ttf') format('truetype'),
url('./方正正粗黑简体.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.fangzheng-heicu{
font-family: 方正正粗黑简体;
}
</style>
</head>
<body>
<div>
<div class="fangzheng-heicu">
新市民积分贷
</div>
</div>
</body>
</html>
在这个html页面下“新市民积分贷”这几个字使用了新字体，所以压缩出来的字体库中只包含这几个字，体积当然小很多。
执行指令font-spider index.html
(base) ➜ font-spider font-spider index.html
Font family: 方正正粗黑简体
Original size: 2076.764 KB
Include chars: 分市新民积贷
Chars length: 6
Font id: 400fc321aacba6cd5ce967485e0a981f
CSS selectors: .fangzheng-heicu
Font files:
File 方正正粗黑简体.eot created: 4.4 KB
File 方正正粗黑简体.woff created: 4.3 KB
File 方正正粗黑简体.ttf created: 4.212 KB
File 方正正粗黑简体.svg created: 3.722 KB
执行成功后原本字体文件会被放在自动生成的.font-spider文件下，原目录下生成了eot/svg/ttf/woff等4中格式的字体库，选其中要用的即可，一般ttf或者woff。可以在线上的字体库预览网站（blog.luckly-mjw.cn/tool-show/i…）上看看新生成的字体。
新字体库(./方正正粗黑体.TTF)再拿到自己的项目中去使用。这样的缺点就是要把所有用到的字都罗列出来，做一次筛选，有点麻烦，不过好像暂时没有更好的办法。
