相信关于@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
原本我三个字体加起来有15M
现在切换到项目根目录,用字蛛分析你所有的html文件
我们可以看到过程中字蛛把所有用了@font-face的字体都拉出来分析了,最后看三个字体文件的大小
200K不到!,是不是小了很多!
另外,字蛛把刚才压缩的字体,在原目录备份了一份,可以在源目录的.font-spider目录找到,这是个隐藏文件
Tips:不知道为什么,在MacOS上操作需要root权限才能,可能因为字蛛需要完全获取这个Fonts目录的控制权...貌似这个操作已经坑了很多人
本文由
Hansuku 创作,除注明转载/出处外,均为本站原创,转载前请务必署名
最后编辑时间为: 2018-01-08 18:27 Monday