把UI圖裡的小表徵圖製作成icon font，uiicon

把UI圖裡的小表徵圖製作成icon font，uiicon

      一個互動比較多的UI圖裡面可能會有很多小表徵圖，一般可用sprites圖將多個小表徵圖弄成一張大圖，或者其它的辦法，各種方法的比較可參見博主的另外一篇部落格使用css3新屬性clip-path製作小表徵圖，本文深入討論使用icon-font的的製作方法：在PS裡面匯出svg，製作字型表徵圖。這種方法既有sprites圖不需要瀏覽器發多次請求的優點，也有使用clip-path/svg向量無損的優點，並且支援IE6及以上。

      使用sprites圖可以自行用PS將多個小表徵圖放至一張圖：

      sprites圖的缺點是不是向量的，在適配布局裡，在伸縮時可能會失真。而使用icon fonts是向量放大無損的。

      接下來介紹製作icon fonts的方法。

      1. 需要安裝PS、AI

      2. 下載一個PS的指令碼：PSD to SVG，按照裡面說明的辦法，將指令碼放到PS的指令碼目錄：Adobe Photoshop/presets/scripts，重啟PS。

      3. 將圖層裡面的icon形狀圖層複製到一個新文檔，並將圖層重新命名為.svg尾碼結尾。弄成svg結尾主要是為了指令碼識別哪些圖層要進行轉換。注意圖層命名最好用字母數字和底線，不然可能會出問題。

      4. 執行檔案->指令碼->PSD to SVG指令碼，可能會提示沒有儲存文檔，所以執行前先把建立的圖層儲存為一個檔案。

      6. 執行完指令碼後會在psd所在的目錄產生兩個檔案，一個svg和一個ai

      7. 用AI開啟產生的ai檔案，發現只有左下角有一個點顯示出來了，如左顯示，當把滑鼠放上去的時候發現那些path是存在的，只是沒顯示出來。

      8. 所以在AI裡面把它填充一下，把顯示出來的部份填充成黑色，然後另存新檔svg：File->script->saveDocs as Svg

       9. 接下來，藉助icomoon，製作字型。開啟icommon(如果打不開，得使用代理因為這網站使用了Google的一些服務)，點擊右上方的Import Icon按鈕，匯入上面儲存的svg檔案。

       icomoon就會跳到select頁面，選中剛剛匯入的表徵圖：

      再點擊右下角的Generate Font:

      跳到了產生好的icon頁面，點擊get code:

      觀察它的使用代碼，發現這個表徵圖被拆成了6個span表示6個path，還要調節它們的間距。這不是想要的結果，理想的結果應該是只要一個span表示這個表徵圖就好了。

      根據icomoon的給出的提示：

To avoid multicolor glyphs, reimport your SVG after changing all its colors to the same color.

      發現是由於各個部份的顏色不一致導致的，上面設定沒有顯示出來的其它5個部份和已經顯示出來左下角那個點的顏色不一致，於是把它們調成一樣的。

      這裡使用linkscape進行編輯，因為linkscape可以直接編輯svg原始碼，更加直觀，開啟用PS產生的還沒改過的svg檔案：

       可以看到，之所以會沒顯示出來，是因為fill屬性設定成了none，所以把它們都改成和左下角那個都一樣的顏色：

      儲存後上傳到icomoon，再點get code，產生的字型就是完整的一個實體了：

      下載後開啟，產生的字型檔放在了fonts目錄下，同時icomoon提供了demo，使用時，通過一個@font-face匯入字型檔：

@font-face {    font-family: 'icomoon';    src:url('fonts/icomoon.eot?3hb5tb');    src:url('fonts/icomoon.eot?3hb5tb#iefix') format('embedded-opentype'),  /*為了支援低版本的IE*/        url('fonts/icomoon.ttf?3hb5tb') format('truetype'),        url('fonts/icomoon.woff?3hb5tb') format('woff'),        url('fonts/icomoon.svg?3hb5tb#icomoon') format('svg');    font-weight: normal;    font-style: normal;}

     如果不需要支援ie8及以下，可以像上面的樣本一樣用一個before或者after的偽類，如果需要的話，就在html檔案裡面用實體代碼吧，例如上面的功能表按鈕是：

<span style="font-family:icommon">&#xe900;</span>

      當然也可以用icommon提供的大量免費的表徵圖和搜尋功能，但是使用這些表徵圖的缺點是大小可能是不一致的，導致在UI裡面原本相同大小的字型表徵圖需要設定不同的的字型大小。而使用UI圖製作的svg大小比例就會貼近UI圖，無需設定多個font-size。

      需要注意的是，如果以後還要再匯入新的表徵圖，需要在原先的基礎上添加，icommon支援匯入project，將上面的下載的包裡面的selection.json匯入即可。如果把之前的icon和新的icon再匯入一次，會導致之前的icon的編碼發生變化。

      上面使用了用AI/linscape的方法修正PS匯出的ai/svg檔案，也可以直接用文字編輯器修改svg檔案。

      有的時候，可能需要手動調整下svg的結構，例如上面的搜尋方塊，在PS裡面設計師是畫了兩個圓和一條線，如下面所示：

<svg version="1.1" width="40.004px" height="40.004px" viewBox="0 0 40.004 40.004" style="enable-background:new 0 0 40.004 40.004;"     xml:space="preserve"><!-- 外面的圓 --><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,0c10.493,0,19,8.507,19,19s-8.507,19-19,19S0,29.493,0,19    S8.507,0,19,0z"/><!-- 裡面的圓 --><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,2c9.389,0,17,7.611,17,17s-7.611,17-17,17S2,28.389,2,19    S9.611,2,19,2z"/><!-- 放大鏡的手柄 --><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M32.691,31.287l7.022,7.022c0.388,0.388,0.388,1.017,0,1.404    s-1.017,0.388-1.404,0l-7.022-7.022c-0.388-0.388-0.388-1.016,0-1.404C31.674,30.899,32.303,30.899,32.691,31.287z"/></svg>

     如果兩個圓的fill顏色都設定成一樣的灰色的話，那麼產生的檔案是這樣的：

      裡面那個圓的fill屬性的作用導致放大鏡中間被填充了，因此需要手動改一下，將兩個圓放到同一個path，這樣圍起來的路徑就是一個環：

<svg width="40.004px" height="40.004px" viewBox="0 0 40.004 40.004" style="enable-background:new 0 0 40.004 40.004;"     xml:space="preserve"><!-- 把兩個圓放到一起形成一條封閉路徑，即一個環 --><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,0c10.493,0,19,8.507,19,19s-8.507,19-19,19S0,29.493,0,19    S8.507,0,19,0    M19,2c9.389,0,17,7.611,17,17s-7.611,17-17,17S2,28.389,2,19    S9.611,2,19,2z"/><!-- 放大鏡的手柄 --><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M32.691,31.287l7.022,7.022c0.388,0.388,0.388,1.017,0,1.404    s-1.017,0.388-1.404,0l-7.022-7.022c-0.388-0.388-0.388-1.016,0-1.404C31.674,30.899,32.303,30.899,32.691,31.287z"/></svg>

      產生的放大鏡就正常了：

      還有的表徵圖可能是由多個圖層組成的，這個時候需要分別產生svg，然後放到一起，用Inkscape或ai調下相對位置。這裡需要點svg的知識，可以參考MDN上的svg教程。

      最後再比較下大小，把上面第一張sprites圖裡面的9個小表徵圖都製作成icon fonts，產生的檔案大小為：

      最大的為6.6KB，小的為2.6KB，而上面產生的sprites圖為7.1KB，用tinypng壓縮後為3.0KB。可以看到，如果只有幾個表徵圖並且表徵圖本身就比較小時，在檔案大小上，icon-font比sprites圖的優勢並不明顯。當表徵圖增加到18個，即把上面的表徵圖再匯入一次，現製作的icon-fonts大小為：

      18個icon-font的最大svg格式的為13kb，最小的為4.1KB，sprites圖為6KB，考慮到svg格式的並不太會可能被瀏覽器下載， 如所示。所以在檔案大小上，icon-fonts還是比sprites圖有優勢的，如果表徵圖個數不多的話差別不大。如果表徵圖需要展示得很大的話，icon fonts的優勢就很明顯了。

IE6	僅支援 Embedded OpenType(.eot) 格式。
IE7	僅支援 Embedded OpenType(.eot) 格式。
IE8	僅支援 Embedded OpenType(.eot) 格式。
Firefox 3.5	支援 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6	支援 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome	支援 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
Safari	支援 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
Opera	支援 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

來自w3 help

      使用sprites圖的另外一個缺點是，在移動端低配置的裝置，可能會給記憶體和CPU帶來很大的壓力，如果sprites圖太大的話。而icon font的最大優點是向量無損，缺點是只能支援單色的表徵圖，因為它是一個普通的字型，還有在製作上稍麻煩。

 

參考：

      1. 使用css3新屬性clip-path製作小表徵圖

      2. icomoon，製作icon font的線上工具

      3. PSD to SVG