alice-iconfont

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+）也都支持。

没有我要找的图标

请联系 @定风波 。