alice-iconfont
v1.1.0
Published
一套简单实用的 iconfont 集合。
Downloads
5
Readme
iconfont
支付宝的 iconfont 集,把图标放入自定义字体中,然后使用字体图标来替代普通图标。
注意,不要依赖这个模块,在支付宝全站的头部将会部署这段样式。所有的 alice 模块也都可以默认使用 iconfont。
演示
先请看这个 http://site.alipay.im/rei/ (内网可访问)。
为什么要使用Rei
- 摆脱抠图:字体中已有的图标,前端同学就再也不用抠图了!
- 高兼容性:字体图标是矢量的,随意大小,可以用在不同分辨率的移动端上,并且在视网膜屏下不会模糊。
- 规范化:形成支付宝图标规范,视觉同学再也不用重复设计图标了,同时给用户一个统一的图标认知。
- 性能优化:减少请求数,字体大小只有20多KB,缓存后,其他页面用到的图标就不会重新请求,全站有效。
- 易于控制;因为是字体格式,所以可以通过css控制图标的大小、颜色、投影、描边等效果,也可以通过两个图标叠加方式的方式实现更多丰富的效果(如支付宝logo)。
Rei的局限性
- Rei并不想完全取代传统图标,也不是全能的,Rei只会收录一些通用的图标,尽量保持精简。
- 虽然能用css做一些阴影渐描边变等,但不能支持彩色,如生活应用的那些彩色图标Rei就无能为力了。
- 随着图标收录得越来越多,字体文件会相应变大。必须要做combo或拆分。
Rei的原理
Rei其实就是自定义字体,在这个字体的坑位里,不是字或符号而是我们放进去的图标。然后使用css3的@font-face来使用这个自定义字体。
‘@font-face’规则首先定义在CSS2规范中,但是在CSS2.1中被删除,目前又被纳入到CSS3推荐草案中,所以不用担心IE系列,从IE4开始就支持这一属性了,并且现在一些主流的浏览器(Chrome 1+/Firefox 3.5+/Safari 3.1+/iOS 3.1+/Opera 10+)也都支持。
没有我要找的图标
请联系 @定风波 。