Font Awesome在iOS中的使用和注意事項

1. 什麼是Font Awesome?

簡單說,它是一套圖標字體庫。 在iOS中用UILabel顯示圖標,就不用UI設計師切圖了。究其原理,實際Font Awesome就是一套字體,只是顯示出來的樣子不是我們常見的文字。通過Unicode去顯示實際樣式,和漢字顯示是一樣一樣的。

Sample

2. Font Awesome在iOS工程中使用

2.1 官網下載字體庫

要在iOS工程中使用,首先得在官網上下載對應字體庫(.otf/.ttf)。
點擊進入官網
這是中文官網
英文官網字體庫下載直通車
注意: 中文官網版本落後於英文官網

2.2 Xcode工程設置

第一步: 把下載好的字體庫中的.otf文件拖入工程。
我選用的是 「Font Awesome 5 Free-Solid-900.otf」
注意: 拖入時要勾選工程,否則工程引用不到。如果引用成功,可以在Build Phase中看到:

Sample

第二步: info.plist文件設置。
在工程的plist文件中增加“Fonts provided by application”行。“Fonts provided by application”對應的是一個數組,添加一個item,value中填字體庫文件名「Font Awesome 5 Free-Solid-900.otf」。

3. 代碼中使用

UILabel *awesomeLabel = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 30, 30)];
awesomeLabel.font = [UIFont fontWithName:@"FontAwesome5Free-Solid" size:20];
awesomeLabel.text = @"\uf015";
[self.view addSubview:awesomeLabel];

以上代碼就可以實現icon顯示

3.1 Font Name "FontAwesome5Free-Solid"怎麼來的?

"FontAwesome5Free-Solid"並不是字體庫文件名。這是一個特定名稱。可以用代碼獲取:

NSString *path = [[NSBundle mainBundle] pathForResource:@"Font Awesome 5 Free-Solid-900" ofType:@".otf"];
NSURL *fontUrl = [NSURL fileURLWithPath:path];
CGDataProviderRef fontDataProvider = CGDataProviderCreateWithURL((__bridge CFURLRef)fontUrl);
CGFontRef fontRef = CGFontCreateWithDataProvider(fontDataProvider);
CGDataProviderRelease(fontDataProvider);
CTFontManagerRegisterGraphicsFont(fontRef, NULL);
NSString *fontName = CFBridgingRelease(CGFontCopyPostScriptName(fontRef));

fontName就是字體庫名。

3.2 Unicode @"\uf015"在哪裏查找?

通過百度字體編輯器可以查看:百度字體編輯器
把otf拖入編輯窗口,就可以查看所有圖標的Unicode

Sample

4. 注意事項

4.1 otf文件名不是字體庫名

上面已經說過,切記。

4.2 免費版(Free)和收費版(Pro)

Font Awesome官網提供免費版和收費版字體庫。免費版提供一千五百多個圖標(version5.8.1),收費版提供五千多個。一般情況下免費版就夠用了,如果不夠,就付費用Pro版,或者讓勞駕UI設計師切圖。

4.2 顯示異常的兩種情況

在使用過程中,如果哪個步驟有誤,可能會出現兩種顯示異常的情況:
第一種: 圖標顯示一個問號“?”。
第二種: 圖標顯示三個點“···”。

第一種錯誤的原因,是沒有找到字體庫或者字體庫中沒找到對應的圖標。這就要檢查字體庫文件是否正確引入到工程、plist文件是否添加了字體庫、代碼中FontName是否正確、代碼中因使用圖標的Unicode是否正確。

第二種錯誤的原因,字體設大了,比UILabel的Frame大,顯示不下了。

5. 例程

iOS例子工程(GitHub)

完結!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章