Iconfont在教育平台及在iOS中應用執行個體

Iconfont 體系化解決方案

效能最佳化是前端開發不得不面對，必須重視的一個經久話題。教育平台項目除了常規的web效能最佳化外，圖片資來源站點到了流量的70%+，因此圖片的效能最佳化是個重中之重。除了常規的圖片最佳化外，課程封面和機構上傳的圖片採用了webp格式，之前已介紹過，不再贅述。這樣，對平台圖片的最佳化已經達到極致了嗎?

現在在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開發上，不僅可以直接去開源表徵圖庫找現成的表徵圖用到項目中，而且還可以輕鬆地改變表徵圖的顏色、大小，相信可以解放不少設計師和工程師的工作量。