在開發阿裡數據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文件

　　在.plist文件中注冊新加入的字體，.plist文件往往以“[appname]-Info.plist”的形式存在於“Supporting Files”文件夾內。 在.plist文件中添加新屬性“Fonts provided by application”，該屬性的值是一個數組，這意味著可以在這裡注冊多個字體。

　　

 

　　Step 3: 找到字體集名稱

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

　　for(NSString*familyin[UIFontfamilyNames])

　　{

　　NSLog(@"%@",family);

　　for(NSString*namein[UIFontfontNamesForFamilyName:family])

　　{

　　NSLog(@"%@",name);

　　}

　　}

　　運行完，查看控制台裡打印出的所有字體集中是否有新注冊的字體，如果有，說明注冊成功，並將字體名(在這裡是“Kaushan Script”)記住留到後面用。

　　

 

　　Step 4: 使用新字體

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

　　UILabel*label=[[UILabelalloc]initWithFrame:CGRectMake(10,60,300,50)];

　　label.font=[UIFontfontWithName:@"KaushanScript"size:35];

　　label.text=@"iconfont";

　　label.textColor=UIColorFromRGB(0xFF7300);

　　[self.viewaddSubview:label];

　　效果：

　　

 

　　開始使用icon font

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

　　1.選擇需要的圖標

　　在fontello的圖標字體庫選擇自己需要的圖標，並下載生成的字體文件。

　　2.按照上面的步驟將圖標字體注冊到項目中

　　3.找到圖標對應的unicode碼

　　使用FontLab Studio 5工具打開字體文件(比如fontello.ttf)，就可以看到圖標與unicode碼之間的對應關系啦。

　　

 

　　4.使用圖標

　　UILabel*label=[[UILabelalloc]initWithFrame:CGRectMake(10,60,300,50)];

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

　　label.text=@"\U0000E802\U0000E801\U0000E803\U0000E804\U0000E805\U0000E81A";

　　label.textColor=UIColorFromRGB(0xFF7300);

　　[self.viewaddSubview:label];

　　在Objective-C中，自定義的unicode碼需要以“\U0000E802”這樣的格式存在。

　　5.使用emoji表情庫

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

　　UILabel*label5=[[UILabelalloc]initWithFrame:CGRectMake(10,480,300,50)];

　　label5.text=@"\U0000e42a\U0000e525\U0000e41c";

　　[self.viewaddSubview:label5];

　　6.效果

　　

 

　　7.使用自制圖標字體

　　如果上面介紹的圖標庫還滿足不了你的需求，或者需要的圖標分布在多個圖標庫而不能集中到一個字體文件中;那麼你可能需要自己去制作圖標字體文件了。

　　總結

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

　　上代碼

　　demo

　　圖標字體庫

　　fontello

　　etao圖標字體庫(這裡有個問題要注意，etao的圖標字體名為“Untitled1”，是不是生成字體的同學疏忽啦?)

　　IcoMoon

　　emoji表情庫

　　參考資料

　　Common Mistakes With Adding Custom Fonts to Your iOS App

　　Icon font 實踐

　　FontasticIcons

　　ios-fontawesome

　　Custom Unicode Characters in Objective-C

　　CSS3 icon font完全指南