在iOS中使用圖標字體

原文鏈接:在iOS中使用圖標字體?

在開發(fā)阿里數(shù)據(jù)iOS版客戶端的時候,由于項目進度很緊,項目里的所有圖標都是用最平常的背景圖片方案來實現(xiàn)。而為了要兼容普通屏與Retina屏的設(shè)備纤怒,蘋果要求每個背景圖都要以兩種尺寸存(a.png和a@2x.png)骨杂,這讓設(shè)計師們增加了成本,因為他們每次都得出兩份背景圖標莫瞬。

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

那么它能不能應(yīng)用到ios開發(fā)上來呢召锈?帶著這個疑問,我在github上找到了FontasticIconsios-fontawesome获询,但是這兩個OC包對icon資源封裝都有限涨岁,而且擴展也不是很方便。

既然能在ios上使用icon font吉嚣,那么怎么用呢梢薪?經(jīng)過一番摸索,發(fā)現(xiàn)使用原理和自定義字體差不多瓦戚,只有個別操作不太一樣沮尿,接下來我給大家詳細介紹一下。

如何使用自定義字體

在講icon font之前较解,首先先來看看普通自定義字體是如何在ios中使用的畜疾,兩個原理是一樣的。這里以KaushanScript-Regular為例:

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

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

然后再在項目的資源池中確認字體文件是否加入項目,打開xcode項目的Build Phases中查看:

Step 2: 配置.plist文件

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

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

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

Step 3: 找到字體集名稱

注冊完,我們需要檢測是否注冊成功且取得新字體名稱玄糟,檢測方法就是把所有安裝了的字體都打印出來勿她,看看新注冊的字體是否在里面:

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

{

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

for(NSString*?namein[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.找到圖標對應(yīng)的unicode碼

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

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之間的對應(yīng)關(guān)系就好,但是這些圖標都不是矢量圖书释,縮放請自重翘贮。

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

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

[self.view?addSubview:label5];

6.效果

7.使用自制圖標字體

如果上面介紹的圖標庫還滿足不了你的需求,或者需要的圖標分布在多個圖標庫而不能集中到一個字體文件中爆惧;那么你可能需要自己去制作圖標字體文件了狸页。

總結(jié)

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

上代碼

demo

圖標字體庫

fontello

etao圖標字體庫(這里有個問題要注意,etao的圖標字體名為“Untitled1”秃殉,是不是生成字體的同學(xué)疏忽啦坝初?)

IcoMoon

emoji表情庫

參考資料

Common Mistakes With Adding Custom Fonts to Your iOS App

Icon font 實踐

FontasticIcons

ios-fontawesome

Custom Unicode Characters in Objective-C

CSS3 icon font完全指南

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市钾军,隨后出現(xiàn)的幾起案子鳄袍,更是在濱河造成了極大的恐慌,老刑警劉巖吏恭,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拗小,死亡現(xiàn)場離奇詭異,居然都是意外死亡砸泛,警方通過查閱死者的電腦和手機十籍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來唇礁,“玉大人勾栗,你說我怎么就攤上這事≌悼穑” “怎么了围俘?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我界牡,道長簿寂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任宿亡,我火速辦了婚禮常遂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘挽荠。我一直安慰自己克胳,他們只是感情好,可當我...
    茶點故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布圈匆。 她就那樣靜靜地躺著漠另,像睡著了一般。 火紅的嫁衣襯著肌膚如雪跃赚。 梳的紋絲不亂的頭發(fā)上笆搓,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天,我揣著相機與錄音纬傲,去河邊找鬼满败。 笑死,一個胖子當著我的面吹牛嘹锁,可吹牛的內(nèi)容都是我干的葫录。 我是一名探鬼主播,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼领猾,長吁一口氣:“原來是場噩夢啊……” “哼米同!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起摔竿,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤面粮,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后继低,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體熬苍,經(jīng)...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年袁翁,在試婚紗的時候發(fā)現(xiàn)自己被綠了柴底。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡粱胜,死狀恐怖柄驻,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情焙压,我是刑警寧澤鸿脓,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布抑钟,位于F島的核電站,受9級特大地震影響野哭,放射性物質(zhì)發(fā)生泄漏在塔。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一拨黔、第九天 我趴在偏房一處隱蔽的房頂上張望蛔溃。 院中可真熱鬧,春花似錦蓉驹、人聲如沸城榛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至疟位,卻和暖如春瞻润,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背甜刻。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工绍撞, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人得院。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓傻铣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親祥绞。 傳聞我的和親對象是個殘疾皇子非洲,可洞房花燭夜當晚...
    茶點故事閱讀 45,500評論 2 359

推薦閱讀更多精彩內(nèi)容