一、精灵图
1.为什么需要精灵图
一个网页中往往会用很多小的背景图作为修饰，当网页中的图片过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，就出现了 CSS 精灵技术。
核心原理：将网页中的一些小背景图片整合到一张大图中，这样服务器只需要一次请求就可以了！
2、使用精灵图
原理就是移动背景图片，此时可以使用 background-position 移动图片。
移动过程：
① 初始位置摆放，小图与大图的左上角对齐；
② 然后移动大图，直至所需图片部分与小图重合；
③ 计算大图的移动距离，移动距离也就是这个目标图片的 x 和 y 坐标，x 轴越往右越大，y 轴越往下越大，往上往左移动都是负的，我们一般情况下都是往上和往左移动（实际上直接看目标图片相对于左上角的水平及垂直距离即可）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
background: url(sprites.png) no-repeat -182px 0;
}
.box2 {
width: 27px;
height: 25px;
margin: 200px;
background: url(sprites.png) no-repeat -155px -106px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
距离坐标以及长宽等数据通过 PS 测量获得！
3.具体案例
这里给你一张精灵图，请你拼出 RIGHT 这个单词！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: inline-block;
margin: 300px 5px;
}
.R {
width: 132px;
height: 128px;
margin-left: 400px;
background: url(精灵图.png) no-repeat -160px -350px;
}
.I {
width: 70.1px;
height: 129px;
background: url(精灵图.png) no-repeat -383px -25px;
}
.G {
width: 124px;
height: 129px;
background: url(精灵图.png) no-repeat -114px -25px;
}
.H {
width: 121px;
height: 129px;
background: url(精灵图.png) no-repeat -253px -25px;
}
.T {
width: 120px;
height: 128px;
background: url(精灵图.png) no-repeat -432px -350px;
}
</style>
</head>
<body>
<div class="R"></div>
<div class="I"></div>
<div class="G"></div>
<div class="H"></div>
<div class="T"></div>
</body>
</html>
运行结果：
二、字体图标
1.字体图标的优点
虽然精灵图有诸多优点，也可以为页面添加小图标，但是它的缺点也是很明显的。首先，毕竟是图片，图片文件还是比较大的，其次图片本身放大和缩小会失真，而且精灵图里面的小图标都是通过定位测量得来的，所以一旦图片制作完毕，想要再更换是非常复杂的。此时，有一种技术的出现很好地解决了这些问题，就是字体图标 iconfont。
字体图标的使用场景：主要用于显示网页中一些通用、常用的小图标。
字体图标展示给我们的是图标，而本质上它是属于字体！
优点：
① 轻量级，一个字体图标要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少服务器的请求；
② 灵活性，本质就是文字，所以可以随意改变颜色、产生阴影、透明效果、旋转等；
③ 兼容性：几乎支持所有的浏览器，可以放心使用。
注意字体图标不可能完全替代精灵技术，只是对工作中图标部分技术的提升和优化。如果遇到一些结构和样式比较简单的小图标，就用字体图标，如果遇到结构和样式复杂点的小图标，就用精灵图。
2.字体图标下载
字体图标是网页常见的小图标，我们直接网上下载即可。因此使用可以分为：字体图标的下载、字体图标的引入和字体图标的追加三步。
推荐的下载网站：
① icomoon 字库 http://icomoon.io，该字库内容种类繁多，非常全面，唯一的遗憾是它是国外的服务器，打开速度较慢；
② 阿里 iconfont 字库 http://www.iconfont.cn/，包含了淘宝图标库和阿里图标库，可以使用 AI 制作图标上传生成，因为是国内网站，所以很快。
挑选想要的图标，然后下载下来就可以了！
3.字体图标引入
下载完毕之后，注意原先的文件不要删，后面会用。
步骤：
① 下载好的压缩包解压；
② 找到下载包里的 fonts 文件夹放到页面的根目录下（与 HTML 页面同级）；
③ 把这些字体通过 CSS 引入到我们的页面中；
④ 打开 style.css 文件，从开头到 block;} 中间的代码复制上（如下图）；
⑤ 然后直接粘贴到 CSS 里面；
⑥ 打开 demo.html 文件，在这里面你可以看到你下载下来的所有图标；
⑦ 找到你想使用的图标，选中右下角的小矩形符号，这个小矩形就是该字体的特殊符号，复制一份；
⑧ 粘贴到你想要放的位置就可以了（p、div、span）；
⑨ 最后一步，必须在 CSS 里面为其声明字体，且该字体必须是 font-family: ‘icomoon’（与第⑤步所粘贴代码里面的字体一致），既然是文字，就具有文字的所有属性，可以设置字体大小、颜色等。
4.字体图标追加
原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。那么如何添加呢？
很简单，把压缩包里面的 selection.json 重新上传，然后选中自己想要的新图标，重新下载压缩包，并替换原来的文件即可。
① 打开原先的网址，点击 Import Icons（导入新图标）；
② 会弹出一个对话框，找到 selection.json 文件，打开，Yes；
③ 开始选择你想新增的字体图标，生成并下载，替换掉以前的文件。
