Icon Font淺談

這周繼續在弄hybird app 的 UI框架的重構，進行到了編寫換膚功能的階段，而在作換膚以前，我想應該先弄一套框架內置的圖標。

而圖標無非就是兩種作法：

1.圖片

使用圖片很正常，可是有缺陷的。

1.衆多的圖標緻使了增長了許多HTTP請求

  PS:有人會說我把它們弄成一張大圖不久行了，但是這樣弄了以後，你連大小都沒法改變。因此確定仍是一批小圖片。

2.放大縮小失真

3.同張圖片若是須要不一樣顏色，又得弄多一套出來。

2.字體

也就是這篇要說得Icon Font。作法就是講你的圖標作成字符，而後用css3中的@font-face去使用它。

PS:不說怎麼去作字體，由於這對於缺乏美工功底的我來講，作起來太吃力了。

優勢：

1.不失真

2.可作到0 HTTP請求

3.可隨意更換顏色大小（由於它是字體嘛），甚至是漸變

缺點：

1.即便使用一個圖標也要用整個字體css（我以爲無傷大雅）

找另外一條路弄Icon Font

在尋找資源中，有個網站不錯——IcoMoon，https://icomoon.io/#home

1. 這個網站提供20+套,合計上千個不一樣風格的icon font(有免費,有收費的,可是基本上使用免費的就夠用了)

2. 這個網站有一個在線工具,你可使用這個工具來編輯它提供的icon font,而且選擇本身喜歡的打包下載

就說下它的使用步驟

1.點擊

PS:默認會有free的Icon在下面了

2.增長一些icon庫進來

而後選擇你喜歡的圖標，再點擊Generate Font，就能夠到下載頁面。

3.下載配置

之因此選擇那一項，是爲了生成的Icon字體文件直接以base64編碼放在css文件裏面

4.結果

剛剛所說的css文件就是style，咱們看下里面有什麼內容（被我刪減了些東西）

@font-face {
    font-family: 'icomoon';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,XXXXXXXXXXXXXXXXXXXXXXXXX) format('truetype');
    font-weight: normal;
    font-style: normal;
}

PS:後面的"XXXXXXX"太長了，就不在這裏顯示。

這個就是對字體的定義，src的引用也變成了base64編碼的字符串。

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-checkmark:before {
    content: "\e600";
}

這個定義字體樣式，值得注意的是後面一段css，之因此用:before僞類來聲明，其實也是爲了使用時能夠不用寫一個空標籤"&#33"，用法以下。

<span class="icon-checkmark"></span>

就可以愉快的使用Icon Font

總結：

對於mobile web應用來講，Icon Font去實現一套應用或框架默認圖標是個不錯選擇，而不失真是這種方式鼓舞人使用的利器。固然若是是複雜的圖標（色彩多樣...）就不能用了，只能用回圖片。

番外：

一些工具

文件與base64字符串進行轉換工具： http://www.motobit.com/util/base64-decoder-encoder.asp

查看、編輯字體： TypeTool 3或FontCreator