在最新項目中，由于要頻繁使用藝術字， 而用戶設備沒有此字體，因此以往的經驗都是使用圖片... 所以在同事的矚目期許之下，我開始實驗研究這個問題的解決方案

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

轉載于:https://www.cnblogs.com/foreverZ/p/6387251.html

總結

以上是生活随笔為你收集整理的体验 WebFont，网页上的艺术字的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。