以下內(nèi)容轉(zhuǎn)自：http://ux.etao.com/，原文鏈接：http://ued.alimama.com/posts/219

　　科技日新月異的今天，市面上各種分辨率、各種顯示精度的顯示設(shè)備層出不窮，在不同精度不同分辨率的顯示設(shè)備下圖標(biāo)的應(yīng)用展現(xiàn)出現(xiàn)了不同要求；如設(shè)計師為iphone 3gs設(shè)計的圖標(biāo)在iphone4下的展現(xiàn)就顯得很糟糕了。我們?yōu)閜c端產(chǎn)品設(shè)計的圖標(biāo)到平板電腦上顯示（new ipad）上展現(xiàn)就不盡人意了。那這么多的顯示設(shè)備，那么多的圖標(biāo)尺寸設(shè)計師難道要一個一個去優(yōu)化去設(shè)計嗎？

　　傳統(tǒng)位圖形式的圖標(biāo)應(yīng)用使設(shè)計師在不同平臺上花費(fèi)很多重復(fù)的工作量，而且還未必能做到面面俱到。矢量圖標(biāo)技術(shù)在網(wǎng)站、app中的應(yīng)用就顯得尤為重要了；

　　矢量技術(shù)在圖標(biāo)上的應(yīng)用：

　　現(xiàn)在可以承載矢量圖形，同時又可以在app、web上使用的主要有svg和我們熟悉的字體文件；在這里我們主要介紹后者——圖標(biāo)字體；顧名思義圖標(biāo)字體是將圖標(biāo)以字體文件為載體在頁面中展現(xiàn)，前端工程師可以通過控制字體的方式控制圖標(biāo)的大小顏色；

一定要添加iconfont: "打印機(jī)", asiicode: 120 ,不然在window xp下用safari會出現(xiàn)藍(lán)屏。

　　第一步：使用font-face聲明字體

@font-face {font-family: 'uxiconfont';
    src: url('uxiconfont.eot'); /* IE9*/
    src: url('uxiconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('uxiconfont.woff') format('woff'), /* chrome、firefox */
    url('uxiconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('uxiconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}

　　第二步：定義使用iconfont的樣式

.iconfont{font-family:"uxiconfont";font-size:16px;font-style:normal;}

　　第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁面

<i class="iconfont">&#33</i>

　　打包下載：直接下載