頁面引入外部字體ttf，如何提取所須要的ttf字體或者加載過慢的解決方法-1127更新

最近幾天編寫手機端的頁面以後，文中須要華文行楷字體，在網上下載後，引入到了本身的前端頁面,覺得沒有什麼事了，繼續碼代碼

@font-face {
                font-family:huawen;
                src: url(./css/華文行楷.ttf);
            }
            body{
                font-family: huawen;
            }

最終在測試的時候出現問題了，蘋果手機的用戶，基本看不出來什麼問題，安卓測試了一下，頁面打開時原來的字體，隨着進度條的推移，慢慢華文行楷的字體出來了，問題，加載太慢了，看了一下引入的源文件"華文行楷.ttf" 3M，有點大。

 

方法一：搜索關鍵詞，ttf提取工具（方法失敗）

網上不少都是介紹了Google的一款工具，sfnttool 是谷歌開源項目 sfntly 內置的工具，他的做用是從一個字體文件中提取指定的文字，導出的字體中將只包含你須要的文字。

 【下載】http://download.csdn.net/detail/ldpjay/8822587

1. 確保你的電腦已經安裝了Java環境（能運行Java命令），這是必須的。

2. 命令行進入到sfnttool所在目錄下。（一個小技巧，在當前文件夾裏按住Shift再右鍵，裏面有個「在此處打開命令行」。）

3. 輸入下面的命令便可：java -jar sfnttool.jar  -s '這是一段測試文字' msyh.ttf msyh_simplify.ttf  

4. 輸出字體在同目錄下。

 

可是我的根據此方法試了好屢次都是失敗了結，同事也試了好屢次，不知道緣由出如今哪，是輸出了，6k的大小，不管是輸入什麼文字。目前還不知道問題出如今哪，若是您看到而且試驗成功的話，歡迎交流一下！

 

方法二：FontCreator字體編輯軟件

想着覺得能夠大量輸入，可是想象是美好的，沒有這個功能，須要手動一點點把須要的字體拿出來，是個漫長的過程，這個方法也就排除了

 

方法三：搜索關鍵詞，壓縮ttf工具

後來轉換了一下思想，既然不能從個人 「華文行楷.ttf」裏面提取我須要的字體，個人初衷是變小就好了，那就壓縮唄！這個想法一有，就開始找實現的方法，html網頁引用中文字體，文件過大，加載緩慢的解決辦法【字蛛】 一文吸引了個人注意，文章太長，先操做實現了一下，感受ok，步驟也不是很長。

一、node -v ：安裝完node以後，測試node是否安裝
二、npm config set registry http://registry.npm.taobao.org
三、npm info underscore （若是上面配置正確這個命令會有字符串response）
四、npm –registry http://registry.cnpmjs.org info underscore：命令行指定
五、npm install font-spider –g：安裝字蛛
六、font-spider C:\Users\wangchao\Desktop\index*.html：生成新的字體庫，nodejs 命令行輸入

也就是你的html完整路徑 【*】 是通配符，表示會掃描全部的html文件 ，而後回車

方法四--1127更新：利用現有的在線字體提取工具-https://www.fontke.com/tool/subfont/

 

致此，壓縮後的會保存在同級目錄下的.font-spider裏面，直接用就好了