精灵技术：
为了有效减少服务器接收和发送请求的次数，提高页面的加载速度
精灵技术主要针对背景图片的使用，就是把多个小的背景图片整合到一张大图片中
1精灵图主要针对于小的背景图片的使用
2主要借助背景位置来实现background-position
3一般情况下精灵图都是负值 x轴右边走是正值
字体图标：iconfont
使用场景：主要用于显示网页中通用、常用的一些小图标
精灵图有缺点：
图片文件还是较大、图片本身方法和缩小会失真、一旦图片制作完完毕想要更换非常复杂
字体图标解决了上述问题，展示的是图标，本质属于字体
优点
轻量级：一个图标比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少服务器请求
灵活性：本质是文字，可以随便改变颜色，产生阴影，透明效果，旋转
兼容性：几乎支持所有浏览器
注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化
1.字体图标的下载：
2.把下载好的包里面的fonts文件夹放入页面根目录下
2.在css样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中，一定注意字体文件路径问题
3.在htnl标签中添加小图标 span使用字体图标，在span标签中添加的不是普通的文字，添加的是下载好的文件夹中domo.html中找到小方框赋值到span中
4.给span设置字体，设置CSS样式 font-family: 'icomoon';
字体图标的追加和加载：
如果工作中字体图标不够用了，我们需要添加新的字体图标到原来的文件夹中。
把压缩包里里面的selection.json重新上传，然后选中自己想要的新图标，重新下载压缩包，并替换原来的文件夹
<!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>/* 字体声明 */@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?unghpc');src: url('fonts/icomoon.eot?unghpc#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?unghpc') format('truetype'),url('fonts/icomoon.woff?unghpc') format('woff'),url('fonts/icomoon.svg?unghpc#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span {font-family: 'icomoon';font-size: 100px;color: pink;}</style>
</head><body><span></span><span></span>
</body></html>结果：
