以下內容轉自：http://ux.etao.com/，原文鏈接：http://ued.alimama.com/posts/219
科技日新月異的今天，市面上各種分辨率、各種顯示精度的顯示設備層出不窮，在不同精度不同分辨率的顯示設備下圖標的應用展現出現了不同要求；如設計師爲iphone 3gs設計的圖標在iphone4下的展現就顯得很糟糕了。我們爲pc端產品設計的圖標到平板電腦上顯示（new ipad）上展現就不盡人意了。那這麼多的顯示設備，那麼多的圖標尺寸設計師難道要一個一個去優化去設計嗎？
傳統位圖形式的圖標應用使設計師在不同平臺上花費很多重複的工作量，而且還未必能做到面面俱到。矢量圖標技術在網站、app中的應用就顯得尤爲重要了；
矢量技術在圖標上的應用：
現在可以承載矢量圖形，同時又可以在app、web上使用的主要有svg和我們熟悉的字體文件；在這裏我們主要介紹後者——圖標字體；顧名思義圖標字體是將圖標以字體文件爲載體在頁面中展現，前端工程師可以通過控制字體的方式控制圖標的大小顏色；
1 |
一定要添加iconfont: "打印機", asiicode: 120 ,不然在window xp下用safari會出現藍屏。 |
第一步：使用font-face聲明字體
|
1
2
3
4
5
6
7
|
@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的樣式
1 |
.iconfont{font-family:"uxiconfont";font-size:16px;font-style:normal;}
|
第三步：挑選相應圖標並獲取字體編碼，應用於頁面
1 |
<i class="iconfont">!</i>
|
打包下載：直接下載
RDIFramework.NET — 基於.NET的快速信息化系統開發框架 — 系列目錄
一路走來數個年頭，感謝RDIFramework.NET框架的支持者與使用者，大家可以通過下面的地址瞭解詳情。
RDIFramework.NET官方網站：http://www.rdiframework.net/
RDIFramework.NET官方博客：http://blog.rdiframework.net/
同時需要說明的，以後的所有技術文章以官方網站爲準，歡迎大家收藏！
RDIFramework.NET框架由專業團隊長期打造、一直在更新、一直在升級，請放心使用！
歡迎關注RDIFramework.NET框架官方公衆微信（微信號：rdiframework-net），及時瞭解最新動態。
掃描二維碼立即關注
