当前位置：首页 > 网络编程 > JavaScript > 详细页面

gulp-font-spider实现中文字体包压缩实践

时间：2023-03-18来源：系统城装机大师作者：佚名

在前端开发中，经常需要使用特定的字体包，但由于中文字体包特别大，严重影响网页的加载速度，所以需要对字体包进行压缩。

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 安装

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

3.2 使用范例

1
2
3
4
5
6
7 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 写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 /* 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 h2, .demo > .test {
font-family: 'pinghei';
}

特别说明： @font-face中的 src定义的 .ttf 文件必须存在，其余的格式将由工具自动生成

font-spider [options] <htmlFile1 htmlFile2 ...>

3.3 使用场景限制

仅支持固定的文本与样式，不支持 javascript 动态插入的元素与样式
.otf 字体需要转换成 .ttf 才能被压缩
仅支持 utf-8 编码的 HTML 与 CSS 文件
CSS content 属性只支持普通文本，不支持属性、计数器等特性

4. 自动化流程主要步骤

4.1.提取项目中使用到的汉字

利用through2插件，将业务文件夹src内所有的汉字提取出来，并生成chars.txt文件暂存。

1
2
3
4
5
6
7
8
9
10
11
12
13 gulp.task('extract', () => {
return gulp.src('src/**/*{.vue,.scss,.ts}', { dot: true }).pipe(concat('chars.txt'))
.pipe(through2.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中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 gulp.task('insertCharactersToHtml', () => {
return gulp.src('fontminify/chars.txt').pipe(concat('fontMin.html'))
.pipe(through2.obj(function (file, enc, callback) {
const { contents } = file;
let text = contents.toString();
if (text){
file.contents = Buffer.from(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@font-face {
font-family: 'fz';
src: url('${fontName}.eot');
src: url('${fontName}.eot?#font-spider') format('embedded-opentype'),
url('${fontName}.woff') format('woff'),
url('${fontName}.ttf') format('truetype'),
url('${fontName}.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
#app {
font-family: 'fz';
}
</style>
</head>
<body>
<div id="app">
${text}
</div>
</body>
</html>`);
this.push(file);
}
callback();
})).pipe(gulp.dest('fontMinify'))
});

4.3 利用字蛛执行压缩任务

1
2
3
4 gulp.task('fontspider', function () {
return gulp.src('./fontMinify/fontMin.html')
.pipe(fontSpider());
});

5. 完整代码及目录

5.1 目录结构

5.2 完整代码

实现提取文字,压缩字体包后,移动到静态资源文件夹public下并删除任务中生成的fontMInify文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76 const gulp = require('gulp')
const through2 = require("through2");
const del = require('del');
const concat = require('gulp-concat');
const fontSpider = require('gulp-font-spider');
let fontName = 'FZMWFont'
gulp.task('genFontMinify', () => {
return gulp.src(`public/originalFont/${fontName}.ttf`).pipe(gulp.dest('fontMinify/'))
});
// 提取项目中的汉字
gulp.task('extract', () => {
return gulp.src('src/**/*{.vue,.scss,.ts}', { dot: true }).pipe(concat('chars.txt'))
.pipe(through2.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/'))
});
// 将提取出的汉字插入模版html中
gulp.task('insertCharactersToHtml', () => {
return gulp.src('fontminify/chars.txt').pipe(concat('fontMin.html'))
.pipe(through2.obj(function (file, enc, callback) {
const { contents } = file;
let text = contents.toString();
if (text){
file.contents = Buffer.from(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@font-face {
font-family: 'fz';
src: url('${fontName}.eot');
src: url('${fontName}.eot?#font-spider') format('embedded-opentype'),
url('${fontName}.woff') format('woff'),
url('${fontName}.ttf') format('truetype'),
url('${fontName}.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#app {
font-family: 'fz';
}
</style>
</head>
<body>
<div id="app">
${text}
</div>
</body>
</html>`);
this.push(file);
}
callback();
})).pipe(gulp.dest('fontMinify'))
});
// 字体文件压缩
gulp.task('fontspider', function () {
return gulp.src('./fontMinify/fontMin.html')
.pipe(fontSpider());
});
// 将生成后的字体文件移动到预定的静态资源目录
gulp.task('mvMinifyFontToPublic', function () {
return gulp.src(`./fontMinify/${fontName}.*`)
.pipe(gulp.dest('public/fonts'));
});
// 删除字体压缩文件产生的中间文件
gulp.task('rmFontMinify', function () {
return del('fontMinify')
});
gulp.task('default', gulp.series('genFontMinify','extract', 'insertCharactersToHtml', 'fontspider', 'mvMinifyFontToPublic','rmFontMinify'))