这篇文章主要讲解了“gulp-font-spider如何实现中文字体包压缩”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“gulp-font-spider如何实现中文字体包压缩”吧！1.背景在
这篇文章主要讲解了“gulp-font-spider如何实现中文字体包压缩”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“gulp-font-spider如何实现中文字体包压缩”吧！
在前端开发中，经常需要使用特定的字体包，但由于中文字体包特别大，严重影响网页的加载速度，所以需要对字体包进行压缩。
提取项目中使用到的汉字，并利用gulp-font-spider来实现ttf格式字体包的压缩，并生成eot,svg,woff等其他格式的字体包，其中使用gulp来实现这一流程的自动化。
字蛛是一个中文 WEBFont 自动化压缩工具，它能自动分析页面使用的 WebFont 并进行按需压缩，无需手工配置。
按需压缩：从原字体中剔除没有用到的字符，可以将数 MB 大小的中文字体压缩成几十 KB
自动转码：将字体转码成所有浏览器支持的格式，包括老旧的 IE6 与现代浏览器
图标字体：除了常规的字体支持外，还支持图标字体（字蛛 v1.0.0 新特性）
npm install gulp-font-spider --save-dev2 使用范例
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 写法：
@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] <htmlFile1 htmlFile2 ...>
仅支持固定的文本与样式，不支持 javascript 动态插入的元素与样式
.otf 字体需要转换成 .ttf 才能被压缩
仅支持 utf-8 编码的 HTML 与 CSS 文件
CSS content 属性只支持普通文本，不支持属性、计数器等特性
利用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/'))});读取上一步生成的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(`<!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());});
实现提取文字,压缩字体包后,移动到静态资源文件夹public下并删除任务中生成的fontMInify文件
const gulp = require('gulp')const through3 = require("through3");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(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/'))});// 将提取出的汉字插入模版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(`<!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'))如上介绍，可以实现字体文件的压缩并生成多种格式字体包，本文使用的字体包从5M压缩到了200K，体积大大减小，并且可以通过gulp.watch监听src文件夹的变动来实现这一流程的自动化
目前gulp-font-spider只能实现提取项目中出现的汉字，对于后端接口返回的动态汉字无法提取，只能预先列举可能使用的汉字来使用
感谢各位的阅读，以上就是“gulp-font-spider如何实现中文字体包压缩”的内容了，经过本文的学习后，相信大家对gulp-font-spider如何实现中文字体包压缩这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
--结束END--
本文标题: gulp-font-spider如何实现中文字体包压缩
本文链接: https://www.lsjlt.com/news/351848.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0