使用自定義字體相關問題

一、自定義字體生成：

    自定義字體通常只有ttf格式的，因此須要根據ttf文件轉換成咱們須要的eot、woff、svg文件，以適用各個瀏覽器，如圖參考：

    

    轉換工具：

　 FontsQuirrel、onlinefontconverter

    ttf2eot：https://github.com/fontello/ttf2eot

　 ttf2woff：https://github.com/fontello/ttf2woff

　 ttf2svg：https://github.com/qdsang/ttf2svg

　 字體下載：

　 http://fonts.mobanwang.com/

　 http://www.touwenzi.com/

    聲明方式：

@font-face {
    font-family:"Jiancai";/*給自定義字體名稱*/
    src: url("/fonts/Jiancai.eot");/* IE9 */
    src: url("/fonts/Jiancai.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */
    url("/fonts/Jiancai.woff") format("woff"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url("/fonts/Jiancai.ttf") format("truetype"), /*Safari,Android,IOS*/
    url("/fonts/Jiancai.svg#Jiancai") format("svg");/* iOS 4.1- */
    font-style: normal;
    font-weight: normal;}

    引用：

body{font-family: 'Jiancai';}

    #iefix的做用：

    IE9 以前的版本沒有按照標準解析字體聲明，當 src 屬性包含多個 url 時，它沒法正確的解析而返回 404 錯誤，而其餘瀏覽器會自動採用本身適用的 url。所以把僅 IE9 以前支持的 EOT 格式放在第一位，而後在 url 後加上 ?，這樣 IE9 以前的版本會把問號以後的內容看成 url 的參數。至於 #iefix 的做用，一是起到了註釋的做用，二是能夠將 url 參數變爲錨點，減小發送給服務器的字符。（摘自網絡）

 

二、微信QQ瀏覽器X5內核不支持@font-face的問題：

     務必將ttf、eot、woff、svg文件都引入到項目中，如上「聲明方式」

 

三、引用中文字體，文件過大，加載緩慢的問題：

    問題引出：英文只有 26 個字母，一套字體不過幾十 KB；而漢字卻有數萬個，致使字體文件一般有好幾 MB 大小，文件體積比英文字體大數百倍，按照中國網絡環境的現狀，用於實際項目中顯然不現實。

    解決方式：壓縮與轉碼，剔除沒有使用的字符，一般可將數 MB 的字體壓縮成數十 KB 大小，解決中文字體過大的問題，並編碼成跨平臺兼容的格式。

    使用工具：【字蛛】http://font-spider.org/

　 安裝：

    a、安裝nodeJs

　 具體安裝nodeJs步驟此處省略。

    爲解決使用 npm install 命令安裝模塊（font-spider）速度慢的問題，在安裝font-spider以前先安裝 鏡像資源，這裏推薦安裝淘寶鏡像：

首先打開nodejs客戶端
輸入一下命令：
npm config set registry http://registry.npm.taobao.org
npm info underscore （若是上面配置正確這個命令會有字符串response）

命令行指定
npm –registry http://registry.cnpmjs.org info underscore

    b、安裝字蛛

　 輸入命令：npm install font-spider -g

    

    會出現一些警告，不過不要緊，顯示如下信息說明已安裝成功

    c、運行font-spider命令

    在本地新建test目錄：

    

    font目錄下保存事先下載的自定義字體 .ttf 文件，index.html內容以下：

    

    輸入命令運行  font-spider D:\test\*.html 

    注：【*】 是通配符，表示會掃描當前目錄下的全部html文件 

    運行成功候會根據 .ttf文件 生成對應的文件，且文件大小隻有幾KB，其中 '.font-spider' 是備份目錄，以下圖：

    

    

    打開index.html，能夠看到咱們須要的自定義文字已生成好，再將生成的文件引入項目便可

    

 

    此文整理參考：

    http://blog.csdn.net/yueyemoyan/article/details/52004203

    http://www.uisdc.com/the-great-chinese-webfont#

    http://www.cnblogs.com/mofish/archive/2013/04/15/3021804.html