在iOS中使用圖標(biāo)字體

原文鏈接:在iOS中使用圖標(biāo)字體?

在開(kāi)發(fā)阿里數(shù)據(jù)iOS版客戶端的時(shí)候,由于項(xiàng)目進(jìn)度很緊,項(xiàng)目里的所有圖標(biāo)都是用最平常的背景圖片方案來(lái)實(shí)現(xiàn)。而為了要兼容普通屏與Retina屏的設(shè)備,蘋(píng)果要求每個(gè)背景圖都要以?xún)煞N尺寸存(a.png和a@2x.png),這讓設(shè)計(jì)師們?cè)黾恿顺杀?,因?yàn)樗麄兠看味嫉贸鰞煞荼尘皥D標(biāo)。

現(xiàn)在在web開(kāi)發(fā)上,icon font技術(shù)的應(yīng)用很廣泛,它不僅在解決多分辨率顯示問(wèn)題上很有成效,而且在使用它的時(shí)候還能降低不少設(shè)計(jì)和開(kāi)發(fā)成本。

那么它能不能應(yīng)用到ios開(kāi)發(fā)上來(lái)呢?帶著這個(gè)疑問(wèn),我在github上找到了FontasticIconsios-fontawesome,但是這兩個(gè)OC包對(duì)icon資源封裝都有限,而且擴(kuò)展也不是很方便。

既然能在ios上使用icon font,那么怎么用呢?經(jīng)過(guò)一番摸索,發(fā)現(xiàn)使用原理和自定義字體差不多,只有個(gè)別操作不太一樣,接下來(lái)我給大家詳細(xì)介紹一下。

如何使用自定義字體

在講icon font之前,首先先來(lái)看看普通自定義字體是如何在ios中使用的,兩個(gè)原理是一樣的。這里以KaushanScript-Regular為例:

Step 1: 導(dǎo)入字體文件

將字體文件拖入項(xiàng)目(ios支持的字體格式有:.ttf、.otf,其他格式不確定):

然后再在項(xiàng)目的資源池中確認(rèn)字體文件是否加入項(xiàng)目,打開(kāi)xcode項(xiàng)目的Build Phases中查看:

Step 2: 配置.plist文件

在.plist文件中注冊(cè)新加入的字體,.plist文件往往以“[appname]-Info.plist”的形式存在于

“Supporting Files”文件夾內(nèi)。 在.plist文件中添加新屬性“Fonts provided by

application”,該屬性的值是一個(gè)數(shù)組,這意味著可以在這里注冊(cè)多個(gè)字體。

Step 3: 找到字體集名稱(chēng)

注冊(cè)完,我們需要檢測(cè)是否注冊(cè)成功且取得新字體名稱(chēng),檢測(cè)方法就是把所有安裝了的字體都打印出來(lái),看看新注冊(cè)的字體是否在里面:

for(NSString*?familyin[UIFont?familyNames])

{

NSLog(@"%@",?family);

for(NSString*?namein[UIFont?fontNamesForFamilyName:?family])

{

NSLog(@"??%@",?name);

}

}

運(yùn)行完,查看控制臺(tái)里打印出的所有字體集中是否有新注冊(cè)的字體,如果有,說(shuō)明注冊(cè)成功,并將字體名(在這里是“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];

效果:

開(kāi)始使用icon font

圖標(biāo)字體也是字體,使用方式和上面所說(shuō)的差不多,只是在套用上有些差別;這里拿fontello的圖標(biāo)字體庫(kù)?為例。

1.選擇需要的圖標(biāo)

在fontello的圖標(biāo)字體庫(kù)選擇自己需要的圖標(biāo),并下載生成的字體文件。

2.按照上面的步驟將圖標(biāo)字體注冊(cè)到項(xiàng)目中

3.找到圖標(biāo)對(duì)應(yīng)的unicode碼

使用FontLab Studio 5工具打開(kāi)字體文件(比如fontello.ttf),就可以看到圖標(biāo)與unicode碼之間的對(duì)應(yīng)關(guān)系啦。

4.使用圖標(biāo)

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表情庫(kù)

這里還可以使用蘋(píng)果emoji表情庫(kù)的圖標(biāo),這里不需要新加字體庫(kù),只要找到emoji圖標(biāo)和unicode之間的對(duì)應(yīng)關(guān)系就好,但是這些圖標(biāo)都不是矢量圖,縮放請(qǐng)自重。

UILabel?*label5?=?[[UILabel?alloc]?initWithFrame:CGRectMake(10,?480,?300,?50)];

label5.text?=?@"\U0000e42a\U0000e525\U0000e41c";

[self.view?addSubview:label5];

6.效果

7.使用自制圖標(biāo)字體

如果上面介紹的圖標(biāo)庫(kù)還滿足不了你的需求,或者需要的圖標(biāo)分布在多個(gè)圖標(biāo)庫(kù)而不能集中到一個(gè)字體文件中;那么你可能需要自己去制作圖標(biāo)字體文件了。

總結(jié)

這樣,在iOS開(kāi)發(fā)上,不僅可以直接去開(kāi)源圖標(biāo)庫(kù)找現(xiàn)成的圖標(biāo)用到項(xiàng)目中,而且還可以輕松地改變圖標(biāo)的顏色、大小,相信可以解放不少設(shè)計(jì)師和工程師的工作量。

上代碼

demo

圖標(biāo)字體庫(kù)

fontello

etao圖標(biāo)字體庫(kù)(這里有個(gè)問(wèn)題要注意,etao的圖標(biāo)字體名為“Untitled1”,是不是生成字體的同學(xué)疏忽啦?)

IcoMoon

emoji表情庫(kù)

參考資料

Common Mistakes With Adding Custom Fonts to Your iOS App

Icon font 實(shí)踐

FontasticIcons

ios-fontawesome

Custom Unicode Characters in Objective-C

CSS3 icon font完全指南

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容