字型檔案優化實踐

前言

這次專案中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…

截圖