iconFont

 轉自:http://ued.taobao.org/blog/2013/09/icon-font-in-ios/

在開發阿里數據iOS版客戶端的時候，因爲項目進度很緊，項目裏的全部圖標都是用最日常的背景圖片方案來實現。而爲了要兼容普通屏與Retina屏的設備，蘋果要求每一個背景圖都要以兩種尺寸存(a.png和a@2x.png)，這讓設計師們增長了成本，由於他們每次都得出兩份背景圖標。

如今在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* family in [UIFont familyNames])
{
    NSLog(@"%@", family);
    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
        NSLog(@"  %@", name);
    }
}

運行完，查看控制檯裏打印出的全部字體集中是否有新註冊的字體，若是有，說明註冊成功，並將字體名（在這裏是「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.選擇須要的圖標

在fontello的圖標字體庫選擇本身須要的圖標，並下載生成的字體文件。

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」，是否是生成字體的同窗疏忽啦？）
• 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徹底指南