gulp-font-spider实现中文字体包压缩实践
更新时间：2023年03月16日 11:16:59 作者：Eden的前端笔记
这篇文章主要为大家介绍了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 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文件暂存。
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中
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 利用字蛛执行压缩任务
gulp.task('fontspider', function () {
return gulp.src('./fontMinify/fontMin.html')
.pipe(fontSpider());
});
5. 完整代码及目录
5.1 目录结构
5.2 完整代码
实现提取文字,压缩字体包后,移动到静态资源文件夹public下并删除任务中生成的fontMInify文件
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'))
6.优缺点
6.1 优点
如上介绍，可以实现字体文件的压缩并生成多种格式字体包，本文使用的字体包从5M压缩到了200K，体积大大减小，并且可以通过gulp.watch监听src文件夹的变动来实现这一流程的自动化
6.2 缺点
目前gulp-font-spider只能实现提取项目中出现的汉字，对于后端接口返回的动态汉字无法提取，只能预先列举可能使用的汉字来使用
以上就是gulp-font-spider实现中文字体包压缩实践的详细内容，更多关于gulp font spider中文字体包压缩的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了本地存储localStorage设置过期时间示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了微信小程序中button组件的边框设置的实例详解的相关资料,希望通过本文大家能够掌握这部分内容，需要的朋友可以参考下2017-09-09
这篇文章主要为大家介绍了类和原型的设计模式之复制与委托差异详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要给大家介绍的是JavaScript中的单例模式，设计模式代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案,需要的朋友可以参考一下2021-09-09
这篇文章主要为大家介绍了wasm+js实现md5文件获取示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了详解如何用js实现一个网页版节拍器示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了arco design 按需导入报错排查思路与解决方案解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
accesskey 提交...2006-06-06
这篇文章主要为大家介绍了ECMAScript 6对象的扩展实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了TS编写自动创建长度固定数组的类型工具详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论