iconfont，像使用字體同樣使用圖標

在iOS項目中，通常對圖片資源要求有@2x，@3x兩套，以適配不一樣分辨率的設備。對於有換膚需求的APP來講，還須要多套圖來匹配不一樣的主題。這樣不但無形中增長了開發者和設計者的工做量，並且會增大APP的體積。爲了釋放開發者、設計者的雙手以及給APP「減重」，iconfont被引入到iOS開發中來。

iconfont，從字面上就能理解它就是字體，讓開發者像使用字體同樣使用圖標。

製做iconfont

生成iconfont須要矢量圖。一些網站提供生成iconfont的服務，好比icomoon和Fontello。阿里巴巴矢量圖標庫和easyicon提供大量優秀的矢量圖。
icomoon和fontello都可以經過導入SVG圖標或者選擇網站自身提供的圖標來生成iconfont。值得一提的是，icomoon還能夠生成PNG，PDF，CSH等格式。本文以icomoon做爲生成工具。
在生成的文件夾中，能夠找到擴展名爲.ttf的字體集文件。

配置iconfont

將.ttf文件添加到Xcode項目中去，在Build Phases配置中確保能夠看到導入的文件。

以後在項目的info.plist中，添加Fonts provided by application字段。這字段是一個數組，能夠爲項目添加多個字體集。

這樣就能夠在Xcode中使用導入的字體了。

能夠經過代碼來驗證iconfont是否真的可使用了。

for (NSString * family in [UIFont familyNames]) {
        NSLog(@"familyNames:%@", family);
        for (NSString * name in [UIFont fontNamesForFamilyName:family]) {
            NSLog(@"  name: %@",name);
        }
    }

能夠在控制檯看到和.ttf文件名同樣的輸出。

使用iconfont

在使用以前，讓咱們回到生成的文件夾中，在和.ttf的同一個目錄下，能夠找到同名的.svg文件。這是一個xml文件，每個<glyph>標籤對應一個矢量圖標，包含它對應的unicode代碼和名稱。咱們就是經過這個代碼在Xcode中使用這些圖標。這些代碼是&#xXXXX格式的，在Xcode中須要轉換成\UXXXXXXXX格式的。可使用在線編碼工具進行轉譯。

<glyph unicode="&#xe900;" glyph-name="home" d="M1024 369.556l-512 397.426-512-397.428v162.038l512 397.426 512-397.428zM896 384v-384h-256v256h-256v-256h-256v384l384 288z" />

圖標對應的unicode爲，名稱爲home。

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 60, 300, 50)];
label.font = [UIFont fontWithName:@"icomoon" size:35];
label.text = @"\U0000E900";
label.textColor = [UIColor redColor];
[self.view addSubview:label];

這樣，在運行以後，就能夠看到一個紅色的圖標。

通常狀況下，iconfont多用於UIImage類。能夠寫一個UIImage+iconfont的分類來實現icon做爲圖片的功能。

+ (UIImage*)imageWithIcon:(NSString*)iconCode inFont:(NSString*)fontName size:(NSUInteger)size color:(UIColor*)color {
    CGSize imageSize = CGSizeMake(size, size);
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, [[UIScreen mainScreen] scale]);
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, size, size)];
    label.font = [UIFont fontWithName:fontName size:size];
    label.text = iconCode;
    if(color){
        label.textColor = color;
    }
    [label.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *retImage = UIGraphicsGetImageFromCurrentImageContext();
    return retImage;
}

總結

優勢

• 可讓開發者在代碼中直接對圖標進行樣式的修改，並且不須要考慮分辨率適配的問題。

缺點

• 維護起來比較麻煩。每一次生成.ttf文件包含的圖標個數是必定的，若是須要添加，要將selection.json文件導入到生成器中，添加新的圖標，再生成新的.ttf。
• 在代碼中，使用宏定義將unicode轉換成有意義的字符串，更方便使用和維護。