这次项目中UI小姐姐要求用平方等其他字体，遂引入了这些字体，打包的时候发现，OMG，一个字体文件竟然要10M，实在不能忍，于是开始了字体文件大小的优化实践，最后变成38KB一个，还行吧。

解决思路

font-spider 字蛛 原理是通过爬取 HTML 文件以及关联的CSS，找到设置了字体的样式，再爬取相关的的字符，排序去重，最后只针对这些字符保留字体文件相应的字符，从而达到大大缩小文件体积大小的目的。

缺点 ：从它的原理可易知，它的致命缺陷就是有可能无法保留js脚本动态添加的字符的字体文件，及对于页面中存在大量文字动态删减增加等情况不够友好，如果是这种情况下，建议再找别的解决方案。

打包 ：存在 gulp 以及 grunt 相关插件的解决方案，也可以通过控制台输入指令来生成压缩后的字体文件

FontMin 其实这个与字蛛差不多相同，字蛛有的它都有，但值得一提的是，FontMin 还有个应用文件版本，可以通过拖动字体文件和手动输入可能存在的字符来压缩字体文件。

font-spider

gulp-font-spider

可能存在的坑！！！

当然你都用 gulp 了，肯定得先 安装 node ，把gulp相关的大概整明白(了解？)吧

需要有 python 环境 ，推荐 python 2.7 版本的

文件路径确保正确且当你运行 fontSpider 已存在

如果压缩后的字体文件出现了，但是大小没变或者变化不明显，很大可能是源字体文件的问题！！我当初一开始使用的平方字体就总是压缩后体积一点没变，这几种方法我都试了，但结果都一样，我去它们的 GitHub 上看 issue 找到了灵感，当我换了别的字体果然可以了，最后找到了个可以压缩的平方字体，遂。

安装

npm install gulp-font-spider --save-dev

复制代码

确保安装成功，缺啥再 npm install 啥

CSS

// html没什么特别的，引入CSS文件的时候路径注意就好了

@charset "UTF-8";

// 注意引入时使用相对路径

@font-face {

font-family: 'pinghei';

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

src:

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

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

url('../../assets/font/pinghei.ttf') format('truetype'), // 只要确保运行时这个ttf文件在就好了，其它不用管

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

font-weight: normal;

font-style: normal;

}

body {

font-family: pinghei; //使用字体

}

复制代码

gulpfile.js

/**

* 此为gulp4.0的配置文件

*/

var gulp = require('gulp'),

fontSpider = require( 'gulp-font-spider'); //字体文件优化--字蛛

/**

* fontSpider

*/

gulp.task('fontSpider', done => {

gulp

.src(buildPath.html) // 引入相应的html文件

.pipe(fontSpider({

backup: false // 不备份源字体，默认开启备份

}))

.pipe(notify({

message: "font compress done" // 完成后通知

}))

done(); //结束这个task

});

/**

* gulp 默认指令

*/

// 其实开发阶段无所谓压不压缩字体，所以开发阶段，我只是将源字体copy过去即可

/**

* gulp build

* 这里我将fontSpider这个task在最后执行，因为这样确保打包后的html和css文件都已存在了，

* 此时在针对编译后的dist里的html文件里进行筛选字体文件压缩，这样更有效

*/

gulp.task('build',

gulp.series('clean', 'styles', 'html', // 串行运行

gulp.parallel('js', 'vendor', 'copyAssets'), //并行运行

'fontSpider') //最后运行

);

复制代码

截图展示

gulp build

文件夹检查(如果开启备份，则源字体文件在.font-spider中，图中我关闭了自然没有)