前端使用自定義字體方案

工做中我相信你們都遇到過設計要求使用一些奇奇怪怪字體的需求，而後由於字體文件太大，選擇切圖。

我這個需求就厲害了，用戶發的文章能夠選擇字體。這文章中能夠出現的字就太多了，顯然上個方案就不合適了，那咱們是這麼作的呢？

廢話很少說，先上 demo，別問我 demo 是誰。

• 接口地址：https://www.lilnong.top/createfont?txt=%E6%B5%8B%E8%AF%95%E6%96%87%E5%AD%97
• 頁面地址： https://www.lilnong.top/static/html/createfont.html

實現方案

分析一下問題

問題只有一個，那就是字體文件太大了（10MB）。先不說流量貴不，這麼大個文件垃圾網時，我文章都看完你字體還沒回來。

解決方案

固然是把字體文件縮小，那麼有兩種方案

提供經常使用字生成字體文件

英文的話比較簡單，好比只提供 26 個字母。

可是中國漢字博大精深，太難了，那麼咱們能夠提供一些經常使用字。

優勢：

1. 只有一個資源，能夠緩存公用。
2. 實現簡單

缺點：

1. 由於是經常使用字，因此有可能一些不經常使用字就會顯示默認字體，體驗較差。
2. 由於字體文件較大，因此首次加載會慢一點。可是又由於不是全量，會快一點。

動態生成字體文件

這個方案就是把文章中的全部字提出來，而後生成一個字體文件使用。
其實這個方案經常使用於靜態頁面，跑個腳本分析生成一個字體文件。

優勢：

1. 文件小，速度快
2. 實現稍微複雜，由於須要動態生成字體文件，須要服務端搞一個字體生成的服務。

缺點：

1. 每次修改文章都要生成新的字體文件，舊資源利用率不高，緩存利用率不高。

固然，咱們最後選擇了這個動態生成字體文件方案，就了文件小，加載快。

fontmin庫

好了上面把方案說了，下面就開始說怎麼搞了。

我使用的是 fontmin 庫來實現的功能。

安裝

npm install --save fontmin

使用

var Fontmin = require('fontmin');

new Fontmin()
    .src('/static/font/font.ttf') // 載入字體
    .use(rename(txtMD5+'.ttf')) // 修改輸出的文件名
    .use(Fontmin.glyph({text: txt,hinting: false})) //子集化 text 參數就是輸出時要的字體
    .use(Fontmin.ttf2eot())     // eot 轉換插件
    .use(Fontmin.ttf2woff())    // woff 轉換插件     
    .use(Fontmin.ttf2svg())     // svg 轉換插件
    .use(Fontmin.css())         // css 生成插件
    .dest('/static/fontmin'); // 設置字體輸出路徑
    .run(function (err, files) {
        if (err) throw err;
        console.log('success');
    });

修改生成的文件名稱

var rename = require('gulp-rename');

.use(rename(txtMD5+'.ttf')) // 修改輸出的文件名

修改css文件中字體的 font-family

.use(Fontmin.css(
    fontFamily: 'MD5'
))

其餘資源

1. font-spider
   能夠自動分析html文件，能夠放入gulp中使用。
2. font-carrier
   也能夠作字體子集化，還能夠修改每一個字的字形（能夠理解爲混淆）。

微信公衆號：前端linong