開發沒切圖怎麼辦？矢量圖標（iconFont）上手指南

級別：★☆☆☆☆
標籤：「iconFont」「Tool」「UIFont」
做者： 647
審校： QiShare團隊

---

需求：有時候咱們本身想獨立開發一些App，但苦惱沒有設計給icon切圖？ 這可怎麼辦？
今天咱們來介紹一種比較高效且高質量的替代方案：使用矢量圖標 —— iconFont。

1、iconFont簡介

iconFont：是阿里巴巴提供的一個矢量圖標庫。簡單來講，就是能夠把icon轉換成font，再經過文本展現出來。官網連接
支持：Web、iOS、Android平臺使用。

2、iOS端簡單使用指南

第一步：

登陸iconFont，挑選你須要的icon，並把它們加入購物車，下載代碼。

• 挑選統一風格的icon

• 全局搜索想要的icon

• 將須要使用的icon加入到購物車

• 下載代碼

第二步：

解壓下載的壓縮包，注意demo_index.html和iconFont.ttf文件。打開工程將ttf導入到項目中，並在info.plist中配置。

• 壓縮文件，找到demo_index.html、iconFont.ttf

• 將iconFont.ttf文件導入項目：

第三步：

打開demo_index.html預覽iconFont所對應的Unicode編碼。並在項目中應用。

• 打開demo_index.html文件

• swift使用方法以下，用格式\u{編碼}使用Unicode編碼

//...
label.font = UIFont.init(name: "iconFont", size: 26.0)
label.text = "\u{e658}"
//...
複製代碼

• Objective-C使用方法以下，用格式\U0000編碼使用Unicode編碼

//...
label.font = [UIFont fontWithName:@"uxIconFont" size: 34];;
label.text = @"\U0000e658";
//...
複製代碼

這樣，在沒有設計提供切圖的狀況下，就能夠用Label的iconFont字體代替切圖達成ImageView的效果了。

3、iconFont原理

先把icon經過像素點描述成自定義字體（svg格式字體），而後打包成ttf格式的文件，再經過對應的unicode對應到相關的icon。

4、可能遇到的一些問題

• 多ttf文件導入衝突問題：

因爲從iconFont上打包生成的ttf文件，字體名均爲「iconFont」，所以從官網上下載的ttf文件，字體名均爲「iconFont」。所以多ttf文件引入時，會有衝突。

解決方案：用一些工具修改字體名，再導入多個ttf文件。（記得在info.plist文件裏配置）

• Unicode變化問題：

儘可能使用一個帳號下載ttf資源，不一樣的環境下可能會致使生成的Unicode不一樣。從而給項目替換icon帶來成本。

• 版權問題：

iconFont目前應該不支持商用，除非有特別的許可。 本身獨立寫一些小項目的時候可使用。

---

瞭解更多iOS及相關新技術，請關注咱們的公衆號：

小編微信：可加並拉入《QiShare技術交流羣》。

關注咱們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公衆號)

推薦文章：
DarkMode、WKWebView、蘋果登陸是否必須適配？
iOS 接入 Google、Facebook 登陸（二）
iOS 接入 Google、Facebook 登陸（一）
Nginx 入門實戰 iOS中的3D變換（二）
iOS中的3D變換（一）
WebSocket 雙端實踐（iOS/ Golang）
今天咱們來聊一聊WebSocket（iOS/Golang）
奇舞團安卓團隊——aTaller
奇舞週刊