體驗 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 的，實在不好總結。
所以最終只得和設計達成一致，使用什么字體先讓前端試試能不能壓縮，不能就換個字體，無奈呀...