图片精灵和icon-font对比

今天学习导航上小图标实现的两种方式icon-font和CSS Sprite

CSS Sprite

中文名称图片精灵。实现原理将多个小图片通过工具拼成一张大图进而减少网页的请求数。通过background-image和background-position两个css属性实现导航上的小图标。

注意点：

1. 需要事先定义图标的大小

2. 注意小图标与小图标之间的距离

3. css的坐标系和小学学过的坐标系的y轴正好相反

小插曲：
记得我第一次使用图片精灵的时候，就被俺们的半吊子UE兼PM给虐过。图片size根本不同，我本着别人都是对的原则硬着头皮写，后来被boss一顿骂。

icon-font

前端人员通过使用UE自定义的字体实现小图标，如果没有UE的话可以使用阿里巴巴矢量图标库选择下载。
icon-font是主流的实现形式。

icon-font的优点：

1. 灵活： 轻松的改变图标颜色和css特效

2. 可扩展： 改变图标的大小像改变字体大小一样简单

3. 矢量性： 缩放不会造成图标的失真

4. 很好的兼容性： IE6就开始支持了

DEMO

css sprite

icon-font

疑问

background-position属性为什么不存在background-position-x background-position-y两个只属性呢？？如果存在图片精灵的hover实现也不会那么的困难了