• GitHub源碼:IconFont
• star:50+

                            ?????? 

以下內(nèi)容來源于官方源碼铅协、 README 文檔、測試 Demo或個人使用總結(jié) 摊沉！

IconFont

Pod version

IconFont is a way to build lossless images of pure color with font file.

簡介

IconFont是一種通過字體文件來構(gòu)建純色圖的方案狐史。更詳細(xì)的介紹參見使用IconFont減小iOS應(yīng)用體積。簡單說來其目的是：

1. 減小應(yīng)用體積说墨，字體文件比圖片要小
2. 圖標(biāo)保真縮放骏全，解決2x/3x乃至將來nx圖問題
3. 方便更改顏色大小，圖片復(fù)用

局限性在于只支持純色圖尼斧，但是在扁平化的今天純色圖變得越來越多姜贡。目前這套方案在點點iOS客戶端上做了廣泛的應(yīng)用，對于應(yīng)用體積壓縮很有幫助棺棵。

Screenshot

使用指南

安裝IconFont

必要條件

Xcode 5
iOS 6.0 +
ARC enabled
CoreText framework

使用CocoaPods安裝

添加pod 'IconFont', '~> 0.0.2'到你項目的Podfile中楼咳。

運行pod install或者pod update來安裝熄捍。

手動安裝

下載源碼，將IconFont目錄拖到你的項目中母怜，并添加CoreText框架到你的項目中余耽。

得到字體文件

強(qiáng)烈建議用iconfont.cn平臺管理字體，資源多苹熏，易用碟贾。或者使用字體工具自行編輯字體轨域，比如FontForge袱耽。如果想了解FontForge的使用，可以看我翻譯的官方文檔FontForge與字體設(shè)計疙挺。

這里需要注意的是字體內(nèi)包含的字體名要與字體文件名一致扛邑。從iconfont.cn下載的字體可能需要重命名。點擊下圖字體項目的編輯項目按鈕铐然，F(xiàn)ont Family一欄就是字體內(nèi)包含的字體名蔬崩，將下載解壓后的ttf文件名修改為這個字體名。當(dāng)然搀暑，也可以在下載后使用FontForge工具修改ttf文件內(nèi)包含的字體名沥阳。

Screenshot

引用頭文件

在需要使用的地方引用頭文件，或者在預(yù)編譯pch文件中做全局引用：

#import "TBCityIconFont.h"

設(shè)置字體名稱

系統(tǒng)會默認(rèn)加載字體名稱LLIconfont自点，如果字體名不是這個桐罕，則需要在使用字體之前設(shè)置字體的名稱。例如在AppDelegate的-application:didFinishLaunchingWithOptions:方法中添加：

[TBCityIconFont setFontName:@"LLIconfont"];

創(chuàng)建UIImage

使用UIImage的category方法從字體創(chuàng)建UIImage：

[UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e601", 24, [UIColor blackColor])]

其中e601圖標(biāo)在字體中存放的Unicode字符位桂敛。如果字體從iconfont.cn網(wǎng)站下載功炮，這個值可以在頁面上圖標(biāo)下方找到∈趸＃可能更好的方法是在另一個文件中將圖標(biāo)預(yù)定義好薪伏，方便管理，使用的時候也更加簡潔粗仓。

// TBCityIconDefine.h

#define kTBCityIconCheck TBCityIconInfoMake(@"\U0000e601", 24, [UIColor blackColor])

[UIImage iconWithInfo:kTBCityIconAppreciate]

代碼結(jié)構(gòu)

核心代碼在工程的IconFont目錄下嫁怀，結(jié)構(gòu)為：

IconFont
├── TBCityIconFont.h
├── TBCityIconFont.m
├── TBCityIconInfo.h
├── TBCityIconInfo.m
├── UIImage+TBCityIconFont.h
└── UIImage+TBCityIconFont.m
└── HQFontImage.h
└── HQFontImage.m

新的引用方式說明

關(guān)于HQFontImage

HQFontImage是擴(kuò)展和加強(qiáng)原來的使用方式，增加字體定義借浊，名稱到圖標(biāo)數(shù)據(jù)映射塘淑，用文字做圖片，自定義背景顏色等蚂斤。
使用時需要定義子類使用存捺，示例工程里有，可以參考使用橡淆。

1 獲取字體文件和相應(yīng)的網(wǎng)頁文件

強(qiáng)烈建議用iconfont.cn平臺管理字體召噩，資源多母赵，易用。
下載的zip文件具滴，包含網(wǎng)頁樣例凹嘲，我們可以從網(wǎng)頁樣例轉(zhuǎn)換為我們需要用的數(shù)據(jù)

2 轉(zhuǎn)換數(shù)據(jù)

我們只是增加了字體映射關(guān)系，方便使用构韵，所以需要做一次轉(zhuǎn)換周蹭，iconfont.cn 官方提供這樣的轉(zhuǎn)換會更好。
目前官方?jīng)]有疲恢，所以可以參考這個網(wǎng)頁小工具：
http://www.aslibra.com/iconFont/
把demo.html用瀏覽器打開凶朗，按提示處理即可，官方數(shù)據(jù)格式不變的情況下可用显拳。
我們把官方用在css的類名作為唯一名稱做映射關(guān)系棚愤。

3 做一個HQFontImage的子類

定義映射關(guān)系或者自定義字體文件，上面提供的網(wǎng)頁可以方便得到下面的數(shù)據(jù)

+ (NSDictionary*)IconDictionary
{
    return @{
             @"delete":@"\U0000e610", // 刪除
             @"shezhi":@"\U0000e60f", // 設(shè)置
             @"order":@"\U0000e600", // order
             @"jikediancanicon02":@"\U0000e601", // 訂單
             @"yinleyinpin":@"\U0000e602", // 音樂音頻
             @"luyin":@"\U0000e603", // 錄音
             @"tianjia":@"\U0000e604", // 添加
             @"dingdan":@"\U0000e605", // 訂單
             @"tianjia1":@"\U0000e606", // 添加
             @"shezhi1":@"\U0000e611", // 設(shè)置
             @"8080pxtubiaokuozhan100":@"\U0000e615", // stop
             @"socialconnect":@"\U0000e612", // social-connect
             @"record":@"\U0000e616", // record
             @"bookaskicon1417":@"\U0000e607", // setting
             @"tixing":@"\U0000e608", // 提醒
             @"iconmenubarorder":@"\U0000e609", // order
             @"wifi":@"\U0000e60a", // WIFI
             @"shezhi2":@"\U0000e60b", // 設(shè)置
             @"gerenzhongxin01":@"\U0000e60c", // 個人中心 
             @"group":@"\U0000e613", // Group 
             @"help":@"\U0000e614", // help 
             @"play":@"\U0000e617", // play 
             @"tixing1":@"\U0000e60d", // 提醒 
             @"yuyin":@"\U0000e60e", // 語音 
             @"":@""};
}

//單獨定義一個字體文件杂数，方便管理多個字體庫
+ (NSString*)fontName
{
    return @"iconfont";
}

4 使用示例

引用自定義的子類文件

#import "HQFontImageDictionary.h"
#import "HQFontImageList.h"

使用圖片

    //使用名字的方式引用
    _appreciateIcon.image = [HQFontImageDictionary iconWithName:@"pause" fontSize:48 color:[UIColor redColor] inset:UIEdgeInsetsMake(10, 10, 10, 10)];
    _checkIcon.image = [HQFontImageDictionary iconWithName:@"pause" fontSize:48 color:[UIColor blueColor] padding:0.3 withBackgroundColor:[UIColor yellowColor]];
    _closeIcon.image = [HQFontImageDictionary iconWithName:@"漢" fontSize:48 color:[UIColor redColor]];
    //自定義宛畦，但兩個字體會有上下偏移不同，不知道是否字體文件問題
    _editIcon.image = [HQFontImageList iconWithName:@"漢" fontSize:48 color:[UIColor redColor]];
    _emojiIcon.image = [HQFontImageDictionary iconWithName:@"pause" fontSize:48 color:[UIColor redColor] withBackgroundColor:[UIColor blackColor]];

Screenshot

參考

• 使用IconFont減小iOS應(yīng)用體積
• 在iOS開發(fā)中使用iconfont圖標(biāo)
• FontForge 與字體設(shè)計