在 iOS 中使用 iconfont,ios中使用iconfont
如何使用自訂字型在講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
表徵圖字型庫fontelloetao表徵圖字型庫(這裡有個問題要注意,etao的表徵圖字型名為“Untitled1”,是不是產生字型的同學疏忽啦?)IcoMoonemoji表情庫
參考資料Common Mistakes With Adding Custom Fonts to Your iOS AppIcon font 實踐FontasticIconsios-fontawesomeCustom Unicode Characters in Objective-C
原文連結:
http://www.cocoachina.com/industry/20131111/7327.html
https://github.com/JohnWong/IconFont