【解决】vue项目中引入的字体库太大，只提取字体库中用到的几个字

一、最近在开发项目中遇到一个需求，就是需要使用不常用的字体来，开发页面中的一些文字描述，由于部分字涉及到接口动态渲染，使用图片不太好操作，就引用了UI提供的字体，由于字体文件比较大，两个字体加起来3M多，而我需要用的字才几个，所以想到了只提取用到的几个字。如下图：

image.png

二、首先下载安装字蛛

npm install font-spider -g

三、使用方法

1.在文件中创建font.css,引入需要用到的字体，定义好font-famaily，并在下方定义好需要用到的id名，方便后面改变字体直接使用 image.png 2.在文件夹中创建一个html页面，并引入font.css文件，将开发中需要用到的字输入，并将对应的需要修改的字设置对应的字体id名 image.png

本地发开html文件页面预览效果：

image.png 3.这个时候页面的font字体还没有提取，还是比较大，两个字体加起来要3M多 image.png

4.在终端输入命令提取需要的字体

 font-spider ./index.html

5.这个时候两个字体库由原来的3M多压缩成了13k，大大提高了性能，字体库中只保留了我们在html中用到的字体 image.png

6.下面就将压缩过的文件放在项目中就可以直接使用了。

image.png