gulp-font-spider實現(xiàn)中文字體包壓縮實踐

更新時間：2023年03月16日 11:16:59 作者：Eden的前端筆記

這篇文章主要為大家介紹了gulp-font-spider實現(xiàn)中文字體包壓縮實踐詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

1.背景

在前端開發(fā)中，經(jīng)常需要使用特定的字體包，但由于中文字體包特別大，嚴重影響網(wǎng)頁的加載速度，所以需要對字體包進行壓縮。

2.方法

提取項目中使用到的漢字，并利用gulp-font-spider來實現(xiàn)ttf格式字體包的壓縮，并生成eot,svg,woff等其他格式的字體包，其中使用gulp來實現(xiàn)這一流程的自動化。

3.gulp-font-spider 安裝及使用

字蛛是一個中文 WebFont 自動化壓縮工具，它能自動分析頁面使用的 WebFont 并進行按需壓縮，無需手工配置。

3.1 特性

按需壓縮：從原字體中剔除沒有用到的字符，可以將數(shù) MB 大小的中文字體壓縮成幾十 KB
簡單可靠：完全基于 HTML 與 CSS 分析進行本地處理，無需 js 與服務端輔助
自動轉(zhuǎn)碼：將字體轉(zhuǎn)碼成所有瀏覽器支持的格式，包括老舊的 IE6 與現(xiàn)代瀏覽器
圖標字體：除了常規(guī)的字體支持外，還支持圖標字體（字蛛 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 動態(tài)插入的元素與樣式
.otf 字體需要轉(zhuǎn)換成 .ttf 才能被壓縮
僅支持 utf-8 編碼的 HTML 與 CSS 文件
CSS content 屬性只支持普通文本，不支持屬性、計數(shù)器等特性

4. 自動化流程主要步驟

4.1.提取項目中使用到的漢字

利用through2插件，將業(yè)務文件夾src內(nèi)所有的漢字提取出來，并生成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 利用字蛛執(zhí)行壓縮任務

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

5. 完整代碼及目錄

5.1 目錄結構

5.2 完整代碼

實現(xiàn)提取文字,壓縮字體包后,移動到靜態(tài)資源文件夾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());
});
// 將生成后的字體文件移動到預定的靜態(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'))