ICONFONT在APP中的使用

農場老馬發表於2015-06-11
APP

阿里IconFont平臺

這裡是阿里巴巴UED部門開發的IconFont平臺，目前阿里系的重量級產品都在使用，裡面有很多資源可供使用。這裡說說如何在客戶端內使用。
IconFont雖然看起來是圖示，實際原理跟字型的實現方式是一樣的，所以我們把每個Icon當作一個特殊的文字來理解和處理。

IconFont使用

1、首先登入網站，搜尋你要用的Icon，把它們加入購物車（點選就可以）。
2、把購物車裡的所有Icon儲存在同一個專案中。
3、進入專案，選擇“下載至本地”。
4、開啟下載的檔案，裡面有一個*.ttf檔案，我們需要的所有字型就都在這裡了。
5、把*.ttf檔案放入專案，當使用時，把TextView（Android）或UILabel（IOS）的Font設定為載入*.ttf生成的自定義字型。這裡有個問題，怎麼指明我們要顯示哪一個Icon呢？
6、下載一個字型編輯軟體，我在Mac上面使用的是FontLab Studio，開啟*.ttf，找到每個圖示對應的Unicode值，以”\ue600”這種形式賦值給TextView（Android）或UILabel（IOS）中的文字。就可以了。

IconFont優勢

1、圖示集中處理，避免重複資源，設計師只要說明Color、Size就可以了。
2、減少包大小，每個IconFont只是一小段文字，檔案大小要比圖片形式的icon小一個數量級。
3、節省記憶體，IconFont與普通文字一樣是使用向量圖的方式繪製的，相比圖片的記憶體分配方式，消耗的記憶體可以忽略不計了。

相關文章