前端学习的踩坑记录--font-spider（字蛛）

先附上官方链接：字蛛

github：font-spider

关于font-spider的官方说明

字蛛是一个中文字体压缩器

具体意思就是可以自由的使用你所需要的字体，他能自动检测网站内自定义的字体，并且从你自定义的字体里面提取出相应的中文字，极大的减少了字体的空间。

使用说明

安装

npm install font-spider -g

使用

首先需要在css文件中引入WebFont

/*声明 WebFont*/

@font-face {

  font-family: 'pinghei';

  src: url('../font/pinghei.eot');

  src:

    url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),

    url('../font/pinghei.woff') format('woff'),

    url('../font/pinghei.ttf') format('truetype'),

    url('../font/pinghei.svg') format('svg');

  font-weight: normal;

  font-style: normal;

}

然后使用选择器使用WebFont

/*使用选择器指定字体*/
.home h1, .demo > .test {
    font-family: 'pinghei';
}

运行font-spider命令

font-spider ./demo/demo.html

值得注意的是，这里可以使用通配符*来匹配所有的html文件

font-spider ./demo/*.html

也可以同时压缩不同文件夹内的html文件，文件夹之间插入空格

font-spider ./demo/*.html ./demo/pages/index.html

至此，font-spider会将原本的字体文件压缩到很小，原本的字体文件将会备份到元目录下的font-spider文件夹内

坑在哪里？

使用过程中，发现报错了

image.png

好的，加上 --debug 查看报错内容

image.png

发现文件都检索完成了，却没有查找到引用的WebFont，网上查找也找不出是什么问题，于是自己重新写了一个demo来测试，最后发现问题是在@media中定义了@keyframe动画

image.png

将@keyframe 动画从@media中移出

image.png

最后重新压缩

image.png

成功！字体文件从原本的16mb瞬间压缩至6kb！再也不用使用网上的字体cdn了。