为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，所以出现了CSS精灵技术。

核心原理：将网页中的一些小背景图片整合到一张大图中，这样服务器只需要一次请求就可以了。

一、精灵图 sprites

（1）通过background-position移动背景图片的位置。

（2）移动的距离就是这个目标图片的x和y坐标。

（3）一般情况下往上往左移动，数值是负值。

（4）使用精灵图的时候需要精确测量，每个精灵图上的小背景图片的大小和位置

二、字体图标

字体图标本质属于字体，不会出现放大失真。

（1）轻量级：字体图标比一系列图像要小，一旦字体加载，图标会马上渲染出来，减少服务器的请求。

（2）灵活性：本质其实是文字，可以随意的改变颜色、产生阴影、透明效果、旋转等

（3）兼容性：几乎支持所有的浏览器。

字体图标下载

阿里巴巴矢量图库                

icomoon字体库

字体图标的使用

（1）将子体图标压缩文件解压之后，将font文件放入工程文件的根目录下，也就是.html文件的同级文件夹中

（2）在CSS样式中声明字体，也就是引入到页面中，字体图标解压文件style.css中给出相关的引用代码，将之放入<style>标签即可。

  (3)打开字体图标解压文件demo.html并打开，复制选用字体对应的“”（小框框）或者输入对应的编号并在并在编号前面加上“\”即可。

（4）之后给相应标签设置字体格式， font-family: 'icomoon';  字体声明已给出。

字体声明

@font-face {

  font-family: 'icomoon';

  src:  url('fonts/icomoon.eot?nwaaf1');

  src:  url('fonts/icomoon.eot?nwaaf1#iefix') format('embedded-opentype'),

    url('fonts/icomoon.ttf?nwaaf1') format('truetype'),

    url('fonts/icomoon.woff?nwaaf1') format('woff'),

    url('fonts/icomoon.svg?nwaaf1#icomoon') format('svg');

  font-weight: normal;

  font-style: normal;

  font-display: block;

}

字体图标的追加

如果需要添加新的字体图标到原来的文件夹，要把解压文件里面的selection.json重新上传，然后选中自己要添加的新图标，并替换原来的文件即可。见下图。