溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“gulp-font-spider如何實現中文字體包壓縮”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“gulp-font-spider如何實現中文字體包壓縮”吧！
在前端開發中，經常需要使用特定的字體包，但由于中文字體包特別大，嚴重影響網頁的加載速度，所以需要對字體包進行壓縮。
提取項目中使用到的漢字，并利用gulp-font-spider來實現ttf格式字體包的壓縮，并生成eot,svg,woff等其他格式的字體包，其中使用gulp來實現這一流程的自動化。
字蛛是一個中文 WebFont 自動化壓縮工具，它能自動分析頁面使用的 WebFont 并進行按需壓縮，無需手工配置。
按需壓縮：從原字體中剔除沒有用到的字符，可以將數 MB 大小的中文字體壓縮成幾十 KB
簡單可靠：完全基于 HTML 與 CSS 分析進行本地處理，無需 js 與服務端輔助
自動轉碼：將字體轉碼成所有瀏覽器支持的格式，包括老舊的 IE6 與現代瀏覽器
圖標字體：除了常規的字體支持外，還支持圖標字體（字蛛 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 動態插入的元素與樣式
.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如何實現中文字體包壓縮這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
