iOS開發---阿里巴巴IconFont適配技術

MickiSalina 8年前發布 | 26K 次閱讀 IOS IconFont 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];