『前端開發』- 字體文件大小優化實踐

字體文件優化實踐

前言

此次項目中UI小姐姐要求用平方等其餘字體，遂引入了這些字體，打包的時候發現，OMG，一個字體文件居然要10M，實在不能忍，因而開始了字體文件大小的優化實踐，最後變成38KB一個，還行吧。

---

解決思路

• font-spider 字蛛 原理是經過爬取HTML文件以及關聯的CSS，找到設置了字體的樣式，再爬取相關的的字符，排序去重，最後只針對這些字符保留字體文件相應的字符，從而達到大大縮小文件體積大小的目的。
  缺點：從它的原理可易知，它的致命缺陷就是有可能沒法保留js腳本動態添加的字符的字體文件，及對於頁面中存在大量文字動態刪減增長等狀況不夠友好，若是是這種狀況下，建議再找別的解決方案。
  打包：存在 gulp 以及 grunt 相關插件的解決方案，也能夠經過控制檯輸入指令來生成壓縮後的字體文件
• FontMin 其實這個與字蛛差很少相同，字蛛有的它都有，但值得一提的是，FontMin 還有個應用文件版本，能夠經過拖動字體文件和手動輸入可能存在的字符來壓縮字體文件。

---

font-spider

gulp-font-spider

可能存在的坑！！！

• 固然你都用 gulp 了，確定得先安裝 node，把gulp相關的大概整明白（瞭解？）吧
• 須要有 python 環境，推薦 python2.7 版本的
• 文件路徑確保正確且當你運行 fontSpider 已存在
• 若是壓縮後的字體文件出現了，可是大小沒變或者變化不明顯，很大多是源字體文件的問題！！我當初一開始使用的平方字體就老是壓縮後體積一點沒變，這幾種方法我都試了，但結果都同樣，我去它們的 GitHub 上看 issue 找到了靈感，當我換了別的字體果真能夠了，最後找到了個能夠壓縮的平方字體，遂。

安裝

npm install gulp-font-spider --save-dev
複製代碼

• 確保安裝成功，缺啥再 npm install 啥

CSS

// html沒什麼特別的，引入CSS文件的時候路徑注意就行了

@charset "UTF-8";

// 注意引入時使用相對路徑
@font-face {
    font-family: 'pinghei';
    src: url('../../assets/font/pinghei.eot');
    src: 
      url('../../assets/font/pinghei.eot?#font-spider') format('embedded-opentype'),
      url('../../assets/font/pinghei.woff') format('woff'),
      url('../../assets/font/pinghei.ttf') format('truetype'), // 只要確保運行時這個ttf文件在就行了，其它不用管
      url('../../assets/font/pinghei.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: pinghei; //使用字體
}
複製代碼

gulpfile.js

/** * 此爲gulp4.0的配置文件 */
var gulp = require('gulp'),
    fontSpider = require( 'gulp-font-spider'); //字體文件優化--字蛛

/** * fontSpider */
gulp.task('fontSpider', done => {
    gulp
	.src(buildPath.html) // 引入相應的html文件
        .pipe(fontSpider({
            backup: false // 不備份源字體，默認開啓備份
        }))
        .pipe(notify({
            message: "font compress done" // 完成後通知
        }))
        done(); //結束這個task
});

/** * gulp 默認指令 */
// 其實開發階段無所謂壓不壓縮字體，因此開發階段，我只是將源字體copy過去便可

/** * gulp build * 這裏我將fontSpider這個task在最後執行，由於這樣確保打包後的html和css文件都已存在了， * 此時在針對編譯後的dist裏的html文件裏進行篩選字體文件壓縮，這樣更有效 */
gulp.task('build', 
    gulp.series('clean', 'styles', 'html',  // 串行運行
        gulp.parallel('js', 'vendor', 'copyAssets'),  //並行運行
    'fontSpider') //最後運行
);
複製代碼

截圖展現

gulp build

文件夾檢查（若是開啓備份，則源字體文件在.font-spider中，圖中我關閉了天然沒有）

---

font-spider

可能存在的坑！！！

• 建議 請再看看上面
• npm install -g node-gyp

安裝

npm install font-spider -g
複製代碼

• 安裝完後 font-spider -V 檢查是否安裝成功

  

運行

font-spider ./*.html --debug
複製代碼

• cd 到項目目錄，再輸入對相應的HTML文件 --debug是爲了報錯時能查看日誌
• 結果和截圖和上面一致

---

FontMin

應用版安裝

github.com/ecomfe/font…

截圖