關於css3 @font-face的使用從調用具體到加載速度的優化

　　最近在做移動端項目的時候發現自定義字體的使用過程中，渲染過程很慢，效果不好還不如直接用圖片呢，就想着說既然出了這么一個好用的東西，怎么會有這種加載速度的問題呢。因為就開始了瘋狂的百度。終於找到了解決方案。為了讓后人乘涼，我決定總結一下這次使用font-face的整個過程。

　　首先還是把font-face的使用方法拋出：

　　1.下載ttf字體文件（網上直接搜索下載以華為行楷為例）：

　　　　　　進入 https://www.fontsquirrel.com/tools/webfont-generator 進行轉換 可以下載到所需要的字體按照一下標注的順序進行操作

　　2.引用自定義字體樣式如下：（由於我是在移動端上使用所以其實只要 ttf就可以了 woff 是為了驗證字體的轉換功能）

 

@font-face {
    font-family: 'huawenxingkai';
    src:
             url('../fonts/huawenxingkai.woff') format('woff'), /* Modern Browsers */
             url('../fonts/huawenxingkai.ttf')  format('truetype'); /* Safari, Android, iOS */
   }

.title>span{color:#FFFFFF;font-family: 'huawenxingkai';display:inline-block;}

 

　　　3.　最終效果如下：

以為終於完成了，結果再移動端上運行起來后發現這效果太慢了啊，還不如圖片。尋求度娘的幫助后找到了優化速度的方法（利用字蛛通過分析本地 CSS 與 HTML 文件獲取 WebFont 中沒有使用的字符，並將這些字符數據從字體中刪除以實現壓縮，同時生成跨瀏覽器使用的格式）因此你首先得把你想要的字寫入html並再樣式中添加你想要加的自定義字體這也就是說每次你想添加新的中文字就得重新生成一次步驟如下

　　1.安裝node.js

　　前往地址https://nodejs.org/en/download/進行下載腦殘式安裝下一步下一步一直到finish,

　　安裝結束后的驗證：cmd 輸入path 驗證是否存在node.js的路徑了

　　2.安裝font-spider

　　再上述界面上輸入命令npm install font-spider -g 安裝font-spider結束后我的界面是這樣的以供參考

 

　　3.運行font-spider得到我們想要的文件

 繼續執行命令 cd 此處加上文件夾的目錄我的目錄是：C:\Users\Administrator\Desktop\rjmoanew

具體引用了自定義字體的html呢？現在發揮他的作用了我的名字是登錄頁哦所以我輸入：font-spider MoaLogin.html

成功返回結果

結果挺驚人的啊，從4M變成10k了這速度一下子就提升上去了，再用移動端看了下效果，幾乎是秒現啊。到此完美落幕了