溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“gulp-font-spider如何實現(xiàn)中文字體包壓縮”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“gulp-font-spider如何實現(xiàn)中文字體包壓縮”吧！
在前端開發(fā)中，經(jīng)常需要使用特定的字體包，但由于中文字體包特別大，嚴(yán)重影響網(wǎng)頁的加載速度，所以需要對字體包進行壓縮。
提取項目中使用到的漢字，并利用gulp-font-spider來實現(xiàn)ttf格式字體包的壓縮，并生成eot,svg,woff等其他格式的字體包，其中使用gulp來實現(xiàn)這一流程的自動化。
字蛛是一個中文 WebFont 自動化壓縮工具，它能自動分析頁面使用的 WebFont 并進行按需壓縮，無需手工配置。
按需壓縮：從原字體中剔除沒有用到的字符，可以將數(shù) MB 大小的中文字體壓縮成幾十 KB
簡單可靠：完全基于 HTML 與 CSS 分析進行本地處理，無需 js 與服務(wù)端輔助
自動轉(zhuǎn)碼：將字體轉(zhuǎn)碼成所有瀏覽器支持的格式，包括老舊的 IE6 與現(xiàn)代瀏覽器
圖標(biāo)字體：除了常規(guī)的字體支持外，還支持圖標(biāo)字體（字蛛 v1.0.0 新特性）
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] <htmlFile1 htmlFile2 ...>
僅支持固定的文本與樣式，不支持 javascript 動態(tài)插入的元素與樣式
.otf 字體需要轉(zhuǎn)換成 .ttf 才能被壓縮
僅支持 utf-8 編碼的 HTML 與 CSS 文件
CSS content 屬性只支持普通文本，不支持屬性、計數(shù)器等特性
利用through3插件，將業(yè)務(wù)文件夾src內(nèi)所有的漢字提取出來，并生成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());
});
實現(xiàn)提取文字,壓縮字體包后,移動到靜態(tài)資源文件夾public下并刪除任務(wù)中生成的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());
});
// 將生成后的字體文件移動到預(yù)定的靜態(tài)資源目錄
gulp.task('mvMinifyFontToPublic', function () {
return gulp.src(`./fontMinify/${fontName}.*`)
.pipe(gulp.dest('public/fonts'));
});
// 刪除字體壓縮文件產(chǎn)生的中間文件
gulp.task('rmFontMinify', function () {
return del('fontMinify')
});
gulp.task('default', gulp.series('genFontMinify','extract', 'insertCharactersToHtml', 'fontspider', 'mvMinifyFontToPublic','rmFontMinify'))如上介紹，可以實現(xiàn)字體文件的壓縮并生成多種格式字體包，本文使用的字體包從5M壓縮到了200K，體積大大減小，并且可以通過gulp.watch監(jiān)聽src文件夾的變動來實現(xiàn)這一流程的自動化
目前gulp-font-spider只能實現(xiàn)提取項目中出現(xiàn)的漢字，對于后端接口返回的動態(tài)漢字無法提取，只能預(yù)先列舉可能使用的漢字來使用
感謝各位的閱讀，以上就是“gulp-font-spider如何實現(xiàn)中文字體包壓縮”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對gulp-font-spider如何實現(xiàn)中文字體包壓縮這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼