快捷導(dǎo)航

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

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

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

1.背景

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

2.方法

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

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

字蛛是一個(gè)中文 WebFont 自動(dòng)化壓縮工具，它能自動(dòng)分析頁(yè)面使用的 WebFont 并進(jìn)行按需壓縮，無(wú)需手工配置。

3.1 特性

按需壓縮：從原字體中剔除沒(méi)有用到的字符，可以將數(shù) MB 大小的中文字體壓縮成幾十 KB
簡(jiǎn)單可靠：完全基于 HTML 與 CSS 分析進(jìn)行本地處理，無(wú)需 js 與服務(wù)端輔助
自動(dòng)轉(zhuǎn)碼：將字體轉(zhuǎn)碼成所有瀏覽器支持的格式，包括老舊的 IE6 與現(xiàn)代瀏覽器
圖標(biāo)字體：除了常規(guī)的字體支持外，還支持圖標(biāo)字體（字蛛 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 寫(xiě)法：

/* 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';
}

特別說(shuō)明： @font-face中的 src定義的 .ttf 文件必須存在，其余的格式將由工具自動(dòng)生成

font-spider [options] <htmlFile1 htmlFile2 ...>

3.3 使用場(chǎng)景限制

僅支持固定的文本與樣式，不支持 javascript 動(dòng)態(tài)插入的元素與樣式
.otf 字體需要轉(zhuǎn)換成 .ttf 才能被壓縮
僅支持 utf-8 編碼的 HTML 與 CSS 文件
CSS content 屬性只支持普通文本，不支持屬性、計(jì)數(shù)器等特性

4. 自動(dòng)化流程主要步驟

4.1.提取項(xiàng)目中使用到的漢字

利用through2插件，將業(yè)務(wù)文件夾src內(nèi)所有的漢字提取出來(lá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文件，寫(xiě)入字體文件引入樣式，并將提取出的漢字插入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í)行壓縮任務(wù)

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

5. 完整代碼及目錄

5.1 目錄結(jié)構(gòu)

5.2 完整代碼

實(shí)現(xiàn)提取文字,壓縮字體包后,移動(dòng)到靜態(tài)資源文件夾public下并刪除任務(wù)中生成的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/'))
});
// 提取項(xiàng)目中的漢字
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());
});
// 將生成后的字體文件移動(dòng)到預(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'))

6.優(yōu)缺點(diǎn)

6.1 優(yōu)點(diǎn)

如上介紹，可以實(shí)現(xiàn)字體文件的壓縮并生成多種格式字體包，本文使用的字體包從5M壓縮到了200K，體積大大減小，并且可以通過(guò)gulp.watch監(jiān)聽(tīng)src文件夾的變動(dòng)來(lái)實(shí)現(xiàn)這一流程的自動(dòng)化