體驗 WebFont，網頁上的藝術字

在最新項目中，因爲要頻繁使用藝術字，

而用戶設備沒有此字體，所以以往的經驗都是使用圖片...

因此在同事的矚目期許之下，我開始實驗研究這個問題的解決方案

1. 直接使用字體文件

@font-face {
  font-family: 'xxxx';
  src: url('../img/漢儀秀英體簡.TTF');
}
.font {
    font-family: 'xxxx', Arial, sans-serif;
}

該方案是能用的，由於使用的是微信不用考慮兼容性，
可是隨着項目發佈，仍是出現了問題，因爲字體文件過大(3.8M)，因而藝術字部分出現了先沒有再爲雅黑再爲藝術字的過程，視覺效果至關不妙，
其次，因爲其文件過大的問題，一個項目使用多個字體那就很「刺激」了。

2. 引用第三方字體庫
a. 字體生成
以「有字庫」爲例，它只需引用對應的 js，選定一個 dom，該 dom 內的文字就變成了藝術字。
使用時要把用在那個域名加入白名單，過段時間再研究其源碼，仍是很是好用的。
DEMO： https://foreverz133.github.io/demos/single/FontFamily.html
WEB： http://www.youziku.com/onlinefont/index
b. 線上字體
以「阿里WebFont」爲例，引用線上字體文件，能夠壓縮該文件只包含部分文字，
用起來還不錯，但問題在於只有 7 個字體，有待尋找其餘字體庫
WEB： http://www.iconfont.cn/webfont/#!/webfont/index

3. 本身壓縮字體文件(只選擇部分文字進行打包)
咱們採用的是 java 版，得安一個 java sdk，初期效果還不錯，大約兩百字的大小是 236K
WEB： https://github.com/forJrking/FontZip (下載 FontZip.jar 那個)

// -----------------------------------------------------------

// --------------------------------------- 2017/05/31 更新

4. 字蛛

它依賴於 nodeJS，和 3 達到的效果是同樣的，但我的以爲要方便不少，

官網： http://font-spider.org/

先使用源字體玩耍，待發布時壓縮一下，而後就不用管了，最多刪掉新生成的一個文件夾

npm install font-spider -g // 安裝

font-spider ./demo/*.html // 壓縮

 

// -----------------------------------------------------------

// --------------------------------------- 2017/05/07 更新

 

後期有出現幾回部分字體壓縮後報錯的狀況，因此又從新研究了一番，

已遇到的主要報錯有如下幾種：

1. Failed to parse metrics in vhea
2. cmap: Failed to parse format 4 cmap subtable 0
3. invalid version tag

都是 OTS parsing error，通常直接調用文件是沒問題的，但壓縮後纔開始報錯， 有去查找些資料，但狀況太過複雜，解決方案有改寫 gulp 的，改寫 IIS 的，實在很差總結。 因此最終只得和設計達成一致，使用什麼字體先讓前端試試能不能壓縮，不能就換個字體，無奈呀...