字蛛是一个中文字体压缩器，可以压缩字体文件，从而解决加载缓慢的问题。字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
字蛛官网网址为:http://font-spider.org/
接下来说一下具体的使用方法：
一、首先安装font-spider
npm install font-spider -g
二、检查字蛛是否安装完成，如果运行后出现版本说明安装成功
font-spider --version 或者 font-spider -V
三、使用字蛛
注意注意注意：
1. @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成
2. 开发阶段请使用相对路径的 CSS 与 WebFont
接下来具体说一下：
1、首先我们在桌面新一个font文件夹，在font文件夹下面新建一个html页面，比如font.html,然后把我们需要压缩的字体库xxxx.ttf文件放到与font.html同级目录
2、在font.html页面编译引入我们的字体库，具体写法如下：
<!DOCTYPE html> <html lang="en"> <style> @font-face { font-family: HYRunYuan55W; src: url("./HYRunYuan-55W.ttf") format('truetype'); font-weight: normal; font-style: normal; } </style> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> 1 2 3 4 5 6 7 8 9 您一共使用分享资源分享是幸福的而最大的幸福分享给学生那您一定是世界上最幸福的人就是把知识赶快开启您的分享之旅吧分享 在信息化的道路上您又前进了一步我们一直在知识的奥秘我们共相伴了最美的风景不是天涯海角而是近在咫尺有您一路相伴真好 </div> </body> </html> <style> div{ font-family: HYRunYuan55W; } </style>
上面div里面的内容就是我们需要从字体库中要筛选的所有字体，然后重新打包一份ttf文件，这份打包后的ttf文件就是只包含我们定义好的这些字体的文件了
3、然后打开cmd，在我们的font文件夹里面执行打包命令，注意：字体库一定要是ttf文件
font-spider font.html
第一种情况：运行后发现没报错，出现下面图片：说明打包成功了
运行成功后你会发现，font文件夹会把你之前的很大的ttf文件备份在新生成的.font-spider文件夹下，在font文件夹下打包压缩后的字体文件，发现字体库文件大小已经很小了。就没问题了，然后使用我们打包后的字体库就可以了
第二种情况：运行时候报错 Cannot read property ‘dirname’ of undefined
如果在文件里，使用了两次@font-face，分别对两种外部字体进行调用，而第一个调用不存在ttf文件，虽然没有对它进行处理，但是font-spider会对他进行识别，发现没有ttf文件，就自动报错。
所以一定注意使用的是ttf字体库
如果是vue项目我们就可以这么引入了
新建一个公共的aa.css文件
然后定义好我们的@font-face
@font-face { font-family: HYRunYuan35W; src: url("../fonts/HYRunYuan-35W.ttf") format("opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: HYRunYuan55W; src: url("../fonts/HYRunYuan-55W.ttf") format("opentype"); font-weight: normal; font-style: normal; }
在main.js引入import ../xxxxx/aa.css
然后在我们需要的地方就可以使用字体库了
通过 font-family: HYRunYuan35w;就可以正常使用了
交流
对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！欢迎关注公众号共同学习。
