gulp-font-spider如何实现中文字体包压缩
1.背景
在前端开发中，经常需要使用特定的字体包，但由于中文字体包特别大，严重影响网页的加载速度，所以需要对字体包进行压缩。
2.方法
提取项目中使用到的汉字，并利用gulp-font-spider来实现ttf格式字体包的压缩，并生成eot,svg,woff等其他格式的字体包，其中使用gulp来实现这一流程的自动化。
3.gulp-font-spider 安装及使用
字蛛是一个中文 WebFont 自动化压缩工具，它能自动分析页面使用的 WebFont 并进行按需压缩，无需手工配置。
3.1 特性
按需压缩：从原字体中剔除没有用到的字符，可以将数 MB 大小的中文字体压缩成几十 KB
简单可靠：完全基于 HTML 与 CSS 分析进行本地处理，无需 js 与服务端辅助
自动转码：将字体转码成所有浏览器支持的格式，包括老旧的 IE6 与现代浏览器
图标字体：除了常规的字体支持外，还支持图标字体（字蛛 v1.0.0 新特性）
3.2 安装
npm install gulp-font-spider --save-dev
3.2 使用范例
var gulp = require( 'gulp' );
var fontSpider = require( 'gulp-font-spider' );
gulp.task('fontspider', function() {
return gulp.src('./index.html')
.pipe(fontSpider());
});
gulp.task('defualt', ['fontspider']);推荐的跨浏览器 @font-faceCSS 写法：
/* html中 声明 WebFont*/
@font-face {
font-family: 'pinghei';
src: url('../font/pinghei.eot');
src:
url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
url('../font/pinghei.woff') format('woff'),
url('../font/pinghei.ttf') format('truetype'),
url('../font/pinghei.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.home h3, .demo > .test {
font-family: 'pinghei';
}特别说明： @font-face中的 src定义的 .ttf 文件必须存在，其余的格式将由工具自动生成
font-spider [options]
3.3 使用场景限制
仅支持固定的文本与样式，不支持 javascript 动态插入的元素与样式
.otf 字体需要转换成 .ttf 才能被压缩
仅支持
utf-8编码的 HTML 与 CSS 文件CSS
content属性只支持普通文本，不支持属性、计数器等特性
4. 自动化流程主要步骤
4.1.提取项目中使用到的汉字
利用through3插件，将业务文件夹src内所有的汉字提取出来，并生成chars.txt文件暂存。
gulp.task('extract', () => {
return gulp.src('src/**/*{.vue,.scss,.ts}', { dot: true }).pipe(concat('chars.txt'))
.pipe(through3.obj(function (file, enc, callback) {
const { contents } = file;
let text = contents.toString();
var result = text.match(/[u4e00-u9fa5]/ig)?.join('');
if (result){
file.contents = Buffer.from(result)
this.push(file);
}
callback();
})).pipe(gulp.dest('fontMinify/'))
});4.2 生成字蛛所需的html入口文件
读取上一步生成的chars.txt中的汉字，组装html文件，写入字体文件引入样式，并将提取出的汉字插入html中
gulp.task('insertCharactersToHtml', () => {
return gulp.src('fontminify/chars.txt').pipe(concat('fontMin.html'))
.pipe(through3.obj(function (file, enc, callback) {
const { contents } = file;
let text = contents.toString();
if (text){
file.contents = Buffer.from(`
${text}