一、精灵图 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;

}