分享一组矢量图标–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，如需转载请自行联系原作者