一、需求背景
- 截止到寫這個的某個下午，開發(fā)iOS已經(jīng)兩年。最近項目搞模塊組件（失敗了一次，還將繼續(xù)），業(yè)務(wù)代碼也不少。稍微空下來一兩天，在網(wǎng)上看到iconfont，于是就想試一下。
- 其實第一條就是扯淡，任何一項技術(shù)的開始都是現(xiàn)實中任務(wù)來推進的，當有了需求后就有了新技術(shù)（于自己而言）。言歸正傳：新來了UI設(shè)計，也就有了新的UI風格。因為設(shè)計要換谷歌新推（現(xiàn)在不一定新了）Material Design ,但是iOS 官方?jīng)]有對應(yīng)的API。實現(xiàn)起來就會有很多的圖片，然后資源包就呵呵噠
- 為了減小資源包（當前項目的資源主要是圖片，代碼量很?。?3M左右，就有了這次折騰。
- 以前也接觸過fontAwesome,感覺iconfont是一條不錯的路。網(wǎng)頁的同學(xué)可以放心的使用阿里媽媽MUX，因為不會有后面提到的不同.ttf之間命名空間的問題。
二、試用過程
- 當你把你需要的icon.svg成功的通過阿里媽媽MUX轉(zhuǎn)換成了yourProject.ttf后，你就可以在你的代碼里使用了。下載下來的都是默認iconfont.xx。文件名是可以修改的，但是必要要和你的fontfamily 一致或者 就是默認的。不然會找不到你的字體的。fontfamily的設(shè)置就在你的iconfont 網(wǎng)頁的項目里編輯即可。
下載下來的文件目錄.png
-
2.將ttf文件拖入你的資源文件夾內(nèi)，然后設(shè)置你的plist文件
08358A55-D6B0-4476-B41F-FC108D333B9A.png
- 3.在Podfile文件 導(dǎo)入 IconFont
注：pod 進來的這個是用來把字體轉(zhuǎn)image的，假如你的項目里是label直接使用text，而不是需要.ttf里面的字體圖片轉(zhuǎn)成image，那么你可以跳過pod 這一步
platform :ios, '8.0'
# ruby語法
# target數(shù)組 如果有新的target直接加入該數(shù)組
targetsArray = ['target0', 'target1']
# 循環(huán)
targetsArray.each do |t|
target t do
pod 'IconFont'
end
end
- 4.AppDelegate.m 實現(xiàn)文件初始化你的fontFamily
@interface AppDelegate ()<>
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[TBCityIconFont setFontName:@"DZJIconfont"];
[self.window makeKeyAndVisible];
return YES;
}
- 5.代碼中使用icon
當做image使用
self.iconImgView.image = [UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e606", 40, [UIColor blueColor])];
當做text使用
self.label.text = @"\U0000e606";
至此，阿里媽媽上的單項目iconfont使用沒有問題
優(yōu)點如下：
1.方便自己管理icon圖庫，如果多個終端的icon都是一樣的話，那么只需要管理一套就好了
2.這也是一個好的資源文件網(wǎng)站，類似于pinterest(前陣子已墻)
3.等等常見的優(yōu)點就不說了
但是問題來了
1.不支持多項目同時使用，或者說是多個ttf文件同時使用時Unicode 不能保證唯一。詳情見我給阿里媽媽MUX提的issue
2.維護成本的問題。新的圖標上傳后，在我的圖標中是允許相同的svg出現(xiàn)的，然后會有兩個一樣的icon但是有不同的unicode。關(guān)于這個去重或者說是增量管理的問題，是可以通過人為的操作避免的，也許后面官方也能做到。
3.對UI設(shè)計師有點小要求即上傳的svg有點要求。這個在你上傳的時候網(wǎng)站會告訴你的。在使用時發(fā)現(xiàn)同樣的容器，同樣的字號，有的能展示，有的clip 了，有的大小不統(tǒng)一，那么就是設(shè)計師的圖有問題。
4.網(wǎng)頁的同學(xué)可以通過css文件,很方便的引入icon對應(yīng)的樣式類（className）來使用?？墒窃诎沧亢蚷OS 來說，就有點尷尬了，只能使用unicode,而font class 和symbol 是給web同學(xué)的（也許是我蠢，如果能用希望讀者不吝賜教）。unicode的可讀性差，使用和替換比較惡心。目前有的方案是寫一個映射類@{@“myIcon”：@“\U0000e600”}這樣的東西，但是維護起來也很煩啊。
三、總結(jié)
iconfont的使用很簡單，也很方便。但是也有一定的局限性。所以需要根據(jù)自己項目的當前狀態(tài)和環(huán)境，來度量這個方案的可行性。我們通過壓縮圖片大小來減小ipa的容量。
個人建議：新項目適合用，降低后期的替換和替換成本。對于那種大量資源圖片的應(yīng)用來說也是值得去試一下的。
傳送門
什么是iconfont
一次關(guān)于IconFont的調(diào)研
IconFont
iconfont 的issue
阿里媽媽MUX
