Skip to content

aliceui/iconfont

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

iconfont


支付宝的 iconfont 集,把图标放入自定义字体中,然后使用字体图标来替代普通图标。

注意,不要依赖这个模块,在支付宝全站的头部将会部署这段样式。所有的 alice 模块也都可以默认使用 iconfont。


演示

先请看这个 http://site.alipay.im/rei/ (内网可访问)。

为什么要使用Rei

  1. 摆脱抠图:字体中已有的图标,前端同学就再也不用抠图了!
  2. 高兼容性:字体图标是矢量的,随意大小,可以用在不同分辨率的移动端上,并且在视网膜屏下不会模糊。
  3. 规范化:形成支付宝图标规范,视觉同学再也不用重复设计图标了,同时给用户一个统一的图标认知。
  4. 性能优化:减少请求数,字体大小只有20多KB,缓存后,其他页面用到的图标就不会重新请求,全站有效。
  5. 易于控制;因为是字体格式,所以可以通过css控制图标的大小、颜色、投影、描边等效果,也可以通过两个图标叠加方式的方式实现更多丰富的效果(如支付宝logo)。

Rei的局限性

  1. Rei并不想完全取代传统图标,也不是全能的,Rei只会收录一些通用的图标,尽量保持精简。
  2. 虽然能用css做一些阴影渐描边变等,但不能支持彩色,如生活应用的那些彩色图标Rei就无能为力了。
  3. 随着图标收录得越来越多,字体文件会相应变大。必须要做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+)也都支持。

没有我要找的图标

请联系 @定风波 。