iconfont技術(shù)調(diào)研
iconfont出現(xiàn)背景
正常的Web/App頁面包含眾多的元素，關(guān)于圖片部分主要分為三種樣式，背景圖（大）混埠、插圖（中）、圖標(biāo)（蟹逄隆）岔冀。三個(gè)樣式元素會(huì)在不同的環(huán)境中出現(xiàn)不同的問題，而iconfont就是解決圖標(biāo)問題的解決方案之一概耻。
圖標(biāo)出現(xiàn)的問題
- 圖標(biāo)大小會(huì)變使套，在兩種情況下：
- 每次UI改版，UI設(shè)計(jì)師改變圖標(biāo)大小
- 自適應(yīng)頁面
- 圖標(biāo)經(jīng)常變
- 圖標(biāo)自身改變
比較SVG
相比較{SVG}鞠柄，由于iconfont是基于SVG侦高，性能方面相差不多，但在iOS使用時(shí)厌杜，自己的dom解析太過于麻煩奉呛，所以需導(dǎo)入SVGKit，大小為6.4M夯尽。（SVG關(guān)鍵字說明）
iconfont
iconfont定義：
Iconfont（圖標(biāo)字體）就是把一些簡單的圖標(biāo)制成字體瞧壮，然后讓圖標(biāo)的使用和字體一樣。
iconfont優(yōu)勢：
- 靈活性
改變圖標(biāo)的顏色匙握，背景色咆槽，大小都非常簡單 - 兼容性
兼容所有流行的瀏覽器，H5和App均可使用圈纺，SVG的加載需要依賴第三方庫秦忿，iconfont自身系統(tǒng)支持 - 高效性
iconfont有矢量特性，沒有圖片縮放的高消耗
iconfont劣勢
- 制作iconfont需要SVG設(shè)計(jì)稿蛾娶，沒有圖片方便
iconfont使用
第一步：將您從IconFont平臺(tái)下載的字體文件(.ttf)添加到工程中灯谣；
打開Info.plist文件，增加一個(gè)新的Array類型的鍵蛔琅，鍵名設(shè)置為UIAppFonts（Fonts provided by application）胎许，增加字體的文件名：“iconfont.ttf“
第二步：使用IconFont字體:
'' UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds];
'' UIFont *iconfont = [UIFont fontWithName:@"uxIconFont" size: 34];
'' label.font = iconfont;
'' label.text = @"\U00003439 \U000035ad \U000035ae \U000035af \U000035eb \U000035ec";
'' [self.view addSubview: label];
iconfont在項(xiàng)目中應(yīng)用
減少包大小
網(wǎng)上部分人做的測試
iconfont性能
加載速度非常快，可以忽略不計(jì),iphone5手機(jī)平均加載一個(gè)在5ms左右
