分享一組矢量圖示–UX圖示字型庫

　　科技日新月異的今天，市面上各種分辨率、各種顯示精度的顯示裝置層出不窮，在不同精度不同分辨率的顯示裝置下圖示的應用展現出現了不同要求；如設計師為iphone 3gs設計的圖示在iphone4下的展現就顯得很糟糕了。我們為pc端産品設計的圖示到平闆電腦上顯示（new ipad）上展現就不盡人意了。那這麼多的顯示裝置，那麼多的圖示尺寸設計師難道要一個一個去優化去設計嗎？

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

　　現在可以承載矢量圖形，同時又可以在app、web上使用的主要有svg和我們熟悉的字型檔案；在這裡我們主要介紹後者——圖示字型；顧名思義圖示字型是将圖示以字型檔案為載體在頁面中展現，前端工程師可以通過控制字型的方式控制圖示的大小顔色；

<a href="http://blog.rdiframework.net/wp-content/uploads/2016/05/ux_icon.png"></a>

1

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

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

2

3

4

5

6

7

<code>@font-face {</code><code>font-family</code><code>: </code><code>'uxiconfont'</code><code>;</code>

<code>    </code><code>src</code><code>: </code><code>url</code><code>(</code><code>'uxiconfont.eot'</code><code>); </code><code>/* IE9*/</code>

<code>    </code><code>src</code><code>: </code><code>url</code><code>(</code><code>'uxiconfont.eot?#iefix'</code><code>) </code><code>format</code><code>(</code><code>'embedded-opentype'</code><code>), </code><code>/* IE6-IE8 */</code>

<code>    </code><code>url</code><code>(</code><code>'uxiconfont.woff'</code><code>) </code><code>format</code><code>(</code><code>'woff'</code><code>), </code><code>/* chrome、firefox */</code>

<code>    </code><code>url</code><code>(</code><code>'uxiconfont.ttf'</code><code>) </code><code>format</code><code>(</code><code>'truetype'</code><code>), </code><code>/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/</code>

<code>    </code><code>url</code><code>(</code><code>'uxiconfont.svg#uxiconfont'</code><code>) </code><code>format</code><code>(</code><code>'svg'</code><code>); </code><code>/* iOS 4.1- */</code>

<code>}</code>

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

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

　　第三步：挑選相應圖示并擷取字型編碼，應用于頁面

<code>&lt;i class=</code><code>"iconfont"</code><code>&gt;&amp;#</code><code>33</code><code>&lt;/i&gt;</code>

本文轉自yonghu86部落格園部落格，原文連結：http://www.cnblogs.com/huyong/p/5526738.html，如需轉載請自行聯系原作者