CSS——精灵图 | 字体图标

精灵图
本质：
CSS精灵是一种处理网页背景图像的方式，将一个页面涉及到的所有零星背景图像都集中到一张大图中去，将大图应用于网页。这样当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。

使用：
要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是用background-position属性精确定位。

制作精灵图
大部分情况下，精灵图都是网页美工做。
精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。
精灵图的宽度取决于最宽的那个背景。
可以横向摆放也可以纵向摆放，但每个图片之间，间隔至少隔开偶数像素。
在精灵图最低端留一片空隙，方便日后添加其他精灵图。

PS：小公司背景图片很少的情况，没必要使用精灵技术，维护成本高。如果背景图片比较多，建议使用精灵技术。

字体图标iconfont
原因：
图片的优点很多，但缺点也很明显，比如增加总文件的大小，增加额外的“http请求”，降低网页性能。而且图片不能很好的进行“缩放”，因为图片放大和缩小会失真。

优点：
可以做出跟图片一样做的事情，如改变透明度、旋转度等；
本质是文字，可以随意改变颜色、产生阴影、透明效果等；
本身体积更小，但携带的信息并没有消减；
几乎支持所有浏览器，移动端设备的必备良药。

使用流程：

1. UI人员设计字体图标效果图（svg）
2. 前端人员上传生成兼容性字体文件包，适合各个浏览器。
3. 前端人员下载兼容字体文件包到本地
4. 把字体文件包引入到HTML页面中（第一步：在样式里声明字体，告诉别人我们自己定义的字体；第二步：）