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

時間 2019-12-10

標籤移動引入字體文件過大處理方法欄目無線简体版

原文原文鏈接

一.背景

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

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

二.瀏覽器對字體的支持

不一樣瀏覽器對字體的支持不一樣,因此咱們要對不一樣的瀏覽器製做不一樣的字體.下圖是瀏覽器對字體的支持狀況.其中N爲不支持,P爲部分支持,Y爲支持.前端

三.Font-Spider(字蛛)

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

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 文件必須存在，其他的格式將由工具自動生成git

3.運行font-slider命令

font-spider ./demo/*.html

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

4.使用gulp,grunt插件

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

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

字蛛 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');        // 成功
});