移動端引入的字體文件過大處理方法

一.背景

前端開發的同學,我們經常會碰到需要還原設計稿中的特殊字體.這時,我們可能會采用兩種方案
1.使用photoshop將文本圖層單獨導出成圖片;　　2.直接引入改字體的字體庫.ttf文件

　　首先第一種方案的缺點,使用圖片代替文字,制作和維護的成本很高,前期切圖,合並雪碧圖比較繁瑣,后期修改和維護更是麻煩.同時使用圖片,會帶來更多的寬帶消耗.用戶體驗方面,用戶無法進行文字的選擇,復制等操作,體驗也不好.
　　第二種方案,解決了上述的一些問題,但是由於漢字數量太大,導致中文字體文件也較大,通常都會有幾M大小,不適合在項目中使用.尤其是移動端項目,由於字體加載速度很慢,體驗會十分不好.本篇博客將介紹兩種自動化工具,來實現在移動端愉快的使用特殊字體.分別是Font-Spider(字蛛)和fontmin.

二.瀏覽器對字體的支持

不同瀏覽器對字體的支持不同,所以我們要對不同的瀏覽器制作不同的字體.下圖是瀏覽器對字體的支持情況.其中N為不支持,P為部分支持,Y為支持.

三.Font-Spider(字蛛)

字蛛通過分析本地 CSS 與 HTML 文件獲取 WebFont 中沒有使用的字符，並將這些字符數據從字體中刪除以實現壓縮，同時生成跨瀏覽器使用的格式。Font-Spider的使用方法很簡單,官網介紹的也很詳細,下面簡單介紹,也可直接去官網查看.

1.首先,全局安裝font-slider

npm install font-spider -g

2.在css中使用

/*聲明 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 h1, .demo > .test {
    font-family: 'pinghei';
}

提示: @font-face 中的 src 定義的 .ttf 文件必須存在，其余的格式將由工具自動生成

3.運行font-slider命令

font-spider ./demo/*.html

頁面依賴的字體將會自動壓縮好，原來幾M的字體文件現在只剩下幾k了, 是不是很爽呢. 

4.使用gulp,grunt插件

　　除了直接進行編譯,font-slider還提供了gulp和grunt的插件,可以更方便的在項目中使用,具體使用可直接到github查看

字蛛 grunt 插件: https://github.com/aui/grunt-font-spider

字蛛 gulp 插件:https://github.com/aui/gulp-font-spider

5.使用的局限

　　font-slider雖然好用,但是由於其原理是直接分析本地 CSS 與 HTML 文件獲取沒有WebFont中沒有使用過的字符,這樣一來,對於動態生成的文字,就沒有辦法使用font-slider了.這是個壞消息!尤其在當下,很多框架都是數據驅動的,更是很多文字都不會直接出現html文件中.對於這種情況, 下面介紹的fontmin或許能解決.

四.使用Fontmin

　　Fontmin 是由百度推出的一個字體子集化方案。使用fontmin可以按需提取字體中的部分字型，最小化打包字體，自動生成 WebFont 字體文件（ttf/woff/eot/svg）和 CSS 文件, 並可利用 @font-face 將自定義字體呈現到網頁中，提升網頁文字體驗。Fontmin 提供了 Node.js 模塊和客戶端 2 種使用方法,下面主要介紹Node.js模塊的使用,更多使用請移步到Fontmin快速指南

1.安裝fontmin

npm i -g fontmin

2.配置

在項目中創建fontmin.js

var Fontmin = require('fontmin');

var srcPath = 'font/*.ttf'; // 字體源文件路徑
var destPath = 'font';    // 字體輸出路徑
var text = '我你今天中大獎了快來領紅包';//有哪些文字可能需要用到這個字體的,都可以在這里進行配置

// 初始化
var fontmin = new Fontmin()
    .src(srcPath)               // 輸入配置
    .use(Fontmin.glyph({        // 字型提取插件
        text: text              // 所需文字
    }))
    .use(Fontmin.ttf2eot())     // eot 轉換插件
    .use(Fontmin.ttf2woff())    // woff 轉換插件     
    .use(Fontmin.ttf2svg())     // svg 轉換插件
    .use(Fontmin.css())         // css 生成插件
    .dest(destPath);            // 輸出配置

// 執行
fontmin.run(function (err, files, stream) {

    if (err) {                  // 異常捕捉
        console.error(err);
    }

    console.log('done');        // 成功
});

3.輸出

執行fontmin.js文件就可以配置好的目錄下輸出對應的字體及css文件,字體文件也會由原來的即M變成幾k了.

node fontmin.js

Fontmin還提供了客戶端, 直接把 TTF 拖進去，左側輸入需要文字，右側實時看效果。點擊生成，一步搞定. 建議還是使用node模塊的方式, 只要在項目中配置好, 以后再有任何文字需要使用字體, 直接添加到fontmin.js中的text中,執行node fontmin.js命令就搞定了.

4.缺點

Fontmin適用於文字不經常變動, 或者在一定范圍內變動的情況, 如果文字經常變，而且沒有固定的范圍，那么也是沒有辦法的。 

 

 

更多性能優化文章,歡迎移步到:

　　性能優化之reflow和repaint

　　使用performance進行網頁性能監控