分享一組矢量圖標–UX圖標字體庫


  以下內容轉自:http://ux.etao.com/,原文鏈接:http://ued.alimama.com/posts/219

  科技日新月異的今天,市面上各種分辨率、各種顯示精度的顯示設備層出不窮,在不同精度不同分辨率的顯示設備下圖標的應用展現出現了不同要求;如設計師為iphone 3gs設計的圖標在iphone4下的展現就顯得很糟糕了。我們為pc端產品設計的圖標到平板電腦上顯示(new ipad)上展現就不盡人意了。那這么多的顯示設備,那么多的圖標尺寸設計師難道要一個一個去優化去設計嗎?

  傳統位圖形式的圖標應用使設計師在不同平台上花費很多重復的工作量,而且還未必能做到面面俱到。矢量圖標技術在網站、app中的應用就顯得尤為重要了;

  矢量技術在圖標上的應用:

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

ux_icon

 
一定要添加iconfont: "打印機", asiicode: 120 ,不然在window xp下用safari會出現藍屏。

  第一步:使用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;}

  第三步:挑選相應圖標並獲取字體編碼,應用於頁面

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

  打包下載:直接下載


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com