FontSpider,让网页自由引入字体

      发布在:Notes, 前端技术      评论:0 条评论

相信关于@font-face的使用,大家都已经十分熟悉了

@font-face {
    font-family:'HanYiTiaoTiao';
    src:url('fonts/HanYiTiaoTiao.ttf');
    font-weight: bolder;
}

而在生产环节的时候,常常一个比较花哨的字体,字体文件有10几20M,但是我们真正用到的,只有里面不到一百个字,剩下的全都是在浪费空间和流量
为了解决这个问题,字蛛FontSpider就诞生了
字蛛能够分析html文件和字体文件,通过分析html里的文字使用情况,把字体文件里多余的、用不到的文字剔除,最终10M的字体压缩到50K。
- 安装字蛛
npm install font-spider -g
- try
FontSpider,让网页自由引入字体
原本我三个字体加起来有15M
现在切换到项目根目录,用字蛛分析你所有的html文件
FontSpider,让网页自由引入字体
我们可以看到过程中字蛛把所有用了@font-face的字体都拉出来分析了,最后看三个字体文件的大小
FontSpider,让网页自由引入字体
200K不到!,是不是小了很多!
另外,字蛛把刚才压缩的字体,在原目录备份了一份,可以在源目录的.font-spider目录找到,这是个隐藏文件

Tips:不知道为什么,在MacOS上操作需要root权限才能,可能因为字蛛需要完全获取这个Fonts目录的控制权...貌似这个操作已经坑了很多人

Responses