分享一组矢量图标–UX图标字体库

Posted 2020-07-12 .NET敏捷开发框架

　　科技日新月异的今天，市面上各种分辨率、各种显示精度的显示设备层出不穷，在不同精度不同分辨率的显示设备下图标的应用展现出现了不同要求；如设计师为iphone 3gs设计的图标在iphone4下的展现就显得很糟糕了。我们为pc端产品设计的图标到平板电脑上显示（new ipad）上展现就不尽人意了。那这么多的显示设备，那么多的图标尺寸设计师难道要一个一个去优化去设计吗？ 　　传统位图形式的图标应用使设计师在不同平台上花费很多重复的工作量，而且还未必能做到面面俱到。矢量图标技术在网站、app中的应用就显得尤为重要了；

　　以下内容转自：http://ux.etao.com/，原文链接：http://ued.alimama.com/posts/219

　　科技日新月异的今天，市面上各种分辨率、各种显示精度的显示设备层出不穷，在不同精度不同分辨率的显示设备下图标的应用展现出现了不同要求；如设计师为iphone 3gs设计的图标在iphone4下的展现就显得很糟糕了。我们为pc端产品设计的图标到平板电脑上显示（new ipad）上展现就不尽人意了。那这么多的显示设备，那么多的图标尺寸设计师难道要一个一个去优化去设计吗？

　　传统位图形式的图标应用使设计师在不同平台上花费很多重复的工作量，而且还未必能做到面面俱到。矢量图标技术在网站、app中的应用就显得尤为重要了；

　　矢量技术在图标上的应用：

　　现在可以承载矢量图形，同时又可以在app、web上使用的主要有svg和我们熟悉的字体文件；在这里我们主要介绍后者——图标字体；顾名思义图标字体是将图标以字体文件为载体在页面中展现，前端工程师可以通过控制字体的方式控制图标的大小颜色；

一定要添加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>

　　打包下载：直接下载