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 與服務端輔助
- 自動轉碼：將字體轉碼成所有瀏覽器支持的格式，包括老舊的 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 字體需要轉換成 .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'))
6.優(yōu)缺點
6.1 優(yōu)點
如上介紹，可以實現(xiàn)字體文件的壓縮并生成多種格式字體包，本文使用的字體包從5M壓縮到了200K，體積大大減小，并且可以通過gulp.watch監(jiān)聽src文件夾的變動來實現(xiàn)這一流程的自動化
6.2 缺點
目前gulp-font-spider只能實現(xiàn)提取項目中出現(xiàn)的漢字，對于后端接口返回的動態(tài)漢字無法提取，只能預先列舉可能使用的漢字來使用
以上就是gulp-font-spider實現(xiàn)中文字體包壓縮實踐的詳細內(nèi)容，更多關于gulp font spider中文字體包壓縮的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家介紹了webpack的安裝配置及使用的教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要為大家介紹了ECharts Canvas渲染在SVG合理運用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
TypeScript對象解構操作符在Spartacus實際項目開發(fā)中的應用解析
這篇文章主要為大家介紹了TypeScript對象解構操作符在Spartacus實際項目開發(fā)中的應用解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
這篇文章主要介紹了微信小程序 側滑刪除（左滑刪除）的相關資料,需要的朋友可以參考下2017-05-05
這篇文章主要為大家介紹了JS前端輕量fabric.js系列之畫布初始化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了前端 JavaScript運行原理，JavaScript引擎是一個計算機程序，它的主要作用是JavaScript運行時將源碼編譯為機器碼。每個主流Web瀏覽器都有自己的JavaScript引擎，它通常由web瀏覽器供應商開發(fā)，接下來一起來看看文章的詳細內(nèi)容吧2021-10-10
微信小程序 網(wǎng)絡請求（post請求，get請求）
這篇文章主要介紹了微信小程序 網(wǎng)絡請求（post請求，get請求）的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了Web應用開發(fā)TypeScript的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
這篇文章主要為大家介紹了js實現(xiàn)兔年轉圈圈動畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了微信小程序 開發(fā)之頂部導航欄實例代碼的相關資料,需要的朋友可以參考下2017-02-02