在iOS中使用icon font

在開發阿里資料ios版客戶端的時候，由於專案進度很緊，專案裡的所有圖示都是用最平常的背景方案來實現。而為了要相容普通屏與retina屏的裝置，蘋果要求每個背景圖都要以兩種尺寸存

「」閱讀器

icon font ios

在開發阿里資料ios版客戶端的時候，由於專案進度很緊，專案裡的所有圖示都是用最平常的背景方案來實現。而為了要相容普通屏與retina屏的裝置，蘋果要求每個背景圖都要以兩種尺寸存(a.png和[email protected])，這讓設計師們增加了成本，因為他們每次都得出兩份背景圖示。

現在在web開發上，icon font技術的應用很廣泛，它不僅在解決多解析度顯示問題上很有成效，而且在使用它的時候還能降低不少設計和開發成本。

那麼它能不能應用到ios開發上來呢？帶著這個疑問，我在github上找到了fontasticicons和ios-fontawesome，但是這兩個oc包對icon資源封裝都有限，而且擴充套件也不是很方便。

既然能在ios上使用icon font，那麼怎麼用呢？經過一番摸索，發現使用原理和自定義字型差不多，只有個別操作不太一樣，接下來我給大家詳細介紹一下。

如何使用自定義字型

在講icon font之前，首先先來看看普通自定義字型是如何在ios中使用的，兩個原理是一樣的。這裡以kaushanscript-regular為例：

step 1: 匯入字型檔案

將字型檔案拖入專案（ios支援的字型格式有：.ttf、.otf，其他格式不確定）：

然後再在專案的資源池中確認字型檔案是否加入專案，開啟xcode專案的build phases中檢視：

step 2: 配置.plist檔案

step 3: 找到字型集名稱

註冊完，我們需要檢測是否註冊成功且取得新字型名稱，檢測方法就是把所有安裝了的字型都列印出來，看看新註冊的字型是否在裡面：

for (nsstring* family in [uifont familynames]) }

執行完，檢視控制台裡列印出的所有字型集中是否有新註冊的字型，如果有，說明註冊成功，並將字型名（在這裡是「kaushan script」）記住留到後面用。

step 4: 使用新字型

最後，就是使用你最新加入的字型啦：

uilabel *label = [[uilabel alloc] initwithframe:cgrectmake(10, 60, 300, 50)];

label.font = [uifont fontwithname:@"kaushan script" size:35];

label.text = @"icon font";

label.textcolor = uicolorfromrgb(0xff7300);

[self.view addsubview:label];

效果：開始使用icon font

圖示字型也是字型，使用方式和上面所說的差不多，只是在套用上有些差別；這裡拿fontello的圖示字型庫為例。

1.選擇需要的圖示

2.按照上面的步驟將圖示字型註冊到專案中

3.找到圖示對應的unicode碼

使用fontlab studio 5工具開啟字型檔案（比如fontello.ttf），就可以看到圖示與unicode碼之間的對應關係啦。

4.使用圖示

uilabel *label = [[uilabel alloc] initwithframe:cgrectmake(10, 60, 300, 50)];

label.font = [uifont fontwithname:@"fontello" size:35];

label.text = @"\u0000e802 \u0000e801 \u0000e803 \u0000e804 \u0000e805 \u0000e81a";

label.textcolor = uicolorfromrgb(0xff7300);

[self.view addsubview:label];

在objective-c中，自定義的unicode碼需要以「\u0000e802」這樣的格式存在。

5.使用emoji表情庫

這裡還可以使用蘋果emoji表情庫的圖示，這裡不需要新加字型庫，只要找到emoji圖示和unicode之間的對應關係就好，但是這些圖示都不是向量圖，縮放請自重。

uilabel *label5 = [[uilabel alloc] initwithframe:cgrectmake(10, 480, 300, 50)];

label5.text = @"\u0000e42a\u0000e525\u0000e41c";

[self.view addsubview:label5];

6.效果

7.使用自製圖示字型

如果上面介紹的圖示庫還滿足不了你的需求，或者需要的圖示分布在多個圖示庫而不能集中到乙個字型檔案中；那麼你可能需要自己去製作圖示字型檔案了。

總結

這樣，在ios開發上，不僅可以直接去開源圖示庫找現成的圖示用到專案中，而且還可以輕鬆地改變圖示的顏色、大小，相信可以解放不少設計師和工程師的工作量。

上**

demo

圖示字型庫

fontello

etao圖示字型庫（這裡有個問題要注意，etao的圖示字型名為「untitled1」，是不是生成字型的同學疏忽啦？）

emoji表情庫

參考資料

icon font 實踐

fontasticicons

ios-fontawesome

custom unicode characters in objective-c

css3 icon font完全指南

在iOS中使用icon font

在 iOS 中使用 iconfont

在vue專案中使用iconfont

在iOS開發中使用FMDB

在iOS中使用icon font

在 iOS 中使用 iconfont

在vue專案中使用iconfont

在iOS開發中使用FMDB

相關推薦