摘要：由于公司的項(xiàng)目里使用了iconfont來部署圖片，解決了每套圖片還需要設(shè)置1x@,2x@,3x@等問題，今天索性來個(gè)而整理分享，方便自己也與方便他人。 ---贈(zèng)人玫瑰，手有余香。

簡(jiǎn)介

IconFont技術(shù)起源于Web領(lǐng)域的Web Font技術(shù)。隨著時(shí)間的推移，網(wǎng)頁(yè)設(shè)計(jì)越來越漂亮。但是電腦預(yù)裝的字體遠(yuǎn)遠(yuǎn)無法滿足設(shè)計(jì)者的要求，于是Web Font技術(shù)誕生了。一個(gè)英文字庫(kù)并不大，通過網(wǎng)絡(luò)下載字體，完成網(wǎng)頁(yè)的顯示。有了Web Font技術(shù)，大大提升了設(shè)計(jì)師的發(fā)揮空間。

網(wǎng)頁(yè)設(shè)計(jì)中圖標(biāo)需要適配多個(gè)分辨率，每個(gè)圖標(biāo)需要占用一次網(wǎng)絡(luò)請(qǐng)求。于是有人想到了用Web Font的方法來解決這兩個(gè)問題，就是IconFont技術(shù)。將矢量的圖標(biāo)做成字體，一次網(wǎng)絡(luò)請(qǐng)求就夠了，可以保真縮放。解決這個(gè)問題的另一個(gè)方式是圖片拼合的Sprite圖。

Web領(lǐng)域使用IconFont類似的技術(shù)已經(jīng)多年，當(dāng)我在15年接觸BootStrap的時(shí)候Font Awesome技術(shù)大行其道。最近IconFont技術(shù)在iOS圖片資源方面得以應(yīng)用，最近有點(diǎn)時(shí)間自己研究整理了一番，在此記錄學(xué)習(xí)點(diǎn)滴。

優(yōu)點(diǎn)

• 由于IconFont是矢量圖標(biāo),所以可以輕松解決圖標(biāo)適配問題
• 一套圖標(biāo)資源可以在不同平臺(tái)使用(android ,ios,web)
• 減小體積，字體文件比圖片要小
• 圖標(biāo)保真縮放，解決2x/3x乃至將來的nx圖問題
• 方便更改顏色大小，圖片復(fù)用

缺點(diǎn)

• 只適用于純色icon
• 使用unicode字符難以理解
• 需要維護(hù)字體庫(kù)

獲取iconfont

• 現(xiàn)有的字體庫(kù)
  fontawesome.dashgame.comionicons.com

• 自己制作
  www.iconfont.cn/help/detail…

制作步驟

step1:

image

image

step2:

image

image

step3:

打開 res/values/strings.xml，把 demo_unicode.html 各個(gè)圖標(biāo)的 字符嗎 添加到 string 值；
如：

<string name="all"></string>
<string name="back"></string>
<string name="cart"></string>
<string name="category"></string>
<string name="close"></string>
<string name="comments"></string>
<string name="cry"></string>

step4:

比如使用 圖標(biāo) cart，打開 activity_main.xml，添加 string 值到

TextView：
<TextView android:id="@+id/like" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:text="@string/cart" />

對(duì)該 TextView 設(shè)置顏色、大小就等同于給圖標(biāo) cart 設(shè)置顏色、大小。而且還不用考慮分辨率問題。

step5:

為 TextView 指定字體庫(kù)：

import android.graphics.Typeface;

protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_main);
Typeface iconfont = Typeface.createFromAsset(getAssets(), 
"iconfont/iconfont.ttf"); 
TextView textview = (TextView)findViewById(R.id.like); 
textview.setTypeface(iconfont);}

通過以上 5 步，就可以實(shí)現(xiàn)目的了。

這就是iconfont的使用，是不是很簡(jiǎn)單。
當(dāng)然你也可以將你的TextView或Typeface封裝起來，在自己項(xiàng)目中的BaseActivity

如果您感覺滿意， 請(qǐng)記得點(diǎn)贊，多謝支持！

也可以加我的QQ或微信：741547004 || rivenlee