Published on

FontSpider,让网页自由引入字体

Authors
  • avatar
    Name
    Hansuku
    Twitter

相信关于@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 目录的控制权...貌似这个操作已经坑了很多人

Discuss on Twitter • View on GitHub
*/}