分享一组矢量图标–UX图标字体库
2016-05-25 13:52
232 查看
以下内容转自:http://ux.etao.com/,原文链接:http://ued.alimama.com/posts/219
科技日新月异的今天,市面上各种分辨率、各种显示精度的显示设备层出不穷,在不同精度不同分辨率的显示设备下图标的应用展现出现了不同要求;如设计师为iphone 3gs设计的图标在iphone4下的展现就显得很糟糕了。我们为pc端产品设计的图标到平板电脑上显示(new ipad)上展现就不尽人意了。那这么多的显示设备,那么多的图标尺寸设计师难道要一个一个去优化去设计吗?
传统位图形式的图标应用使设计师在不同平台上花费很多重复的工作量,而且还未必能做到面面俱到。矢量图标技术在网站、app中的应用就显得尤为重要了;
第一步:使用font-face声明字体
第二步:定义使用iconfont的样式
第三步:挑选相应图标并获取字体编码,应用于页面
打包下载:直接下载
科技日新月异的今天,市面上各种分辨率、各种显示精度的显示设备层出不穷,在不同精度不同分辨率的显示设备下图标的应用展现出现了不同要求;如设计师为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">!</i>
打包下载:直接下载
相关文章推荐
- 【Linux】Ubuntu vi 上下左右变ABCD及 apt-get install报错问题解决方法
- Bitmap的高效加载
- json报错。(原因:含有日期格式字段)
- HTml传递参数
- linux环境中ab命令简介及结果分析
- JavaScript引擎的工作原理
- Extjs3 combobox使用
- SVN的目录说明
- Android中设置控件可见与不可见详解
- eclipse再见,android studio 新手入门教程(三)Github(.ignore忽略规则)的使用
- windows进程详解
- 利用openssl进行RSA加密解密
- 架构之路
- Cas(4)-更改认证方式
- epel的yum源
- JavaEE_Spring_Spring中的事务声明, 事务隔离和事务传播等
- 单向链表(还没有借鉴其他的实现方法)
- iOS响应者链
- c++(重载等号=操作为深拷贝)
- linux系统文件挂载目录满的处理