一、最近在开发项目中遇到一个需求，就是需要使用不常用的字体来，开发页面中的一些文字描述，由于部分字涉及到接口动态渲染，使用图片不太好操作，就引用了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
image.png
6.下面就将压缩过的文件放在项目中就可以直接使用了。
image.png
网友评论