压缩网站自定义字体以提高加载速度

最近有个网站建设项目，客户要求自定义字体，网上下载字体后通过css引入字体，发现5m多?

5m多的ttf大大减缓了网页加载速度，导致我的网页加载卡成?，于是我网上搜了一下如何减小压缩ttf。

Google一顿操作，发现了字蛛这个好东西。

1、安装

首先，要在电脑上安装好nodejs，接下来，我们执行

npm install font-spider -g  //构建插件：grunt-font-spider | gulp-font-spider

2、使用

在css中引入字体

@font-face {
  font-family: 'xxx';
  src: url('../path/to/xxx.ttf');
 ......
}

3、运行 font-spider 命令

font-spider ./PATH/TO/*.html

4、压缩完后如图

瞬间变小很多，原理是把要用的字筛选出来，把不需要的删除，这样字体文件就小了很多

备注：因为laravel的html是动态生成的，所以我打开网页复制了html文件后对其进行压缩的，无法完成动态化的压缩，也希望后期能找到一个动态化解决方案以至于让比如文章标题也能实现提取压缩。

本作品采用《CC 协议》，转载必须注明作者和本文链接