目录
精灵图
字体图标
字体图标的使用
字体图标的追加
字体图标加载的原理
精灵图
当网页中的图像过多，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，大大降低页面的加载速度
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术
也称 CSS Sprites CSS 雪碧
核心原理：将网页中的一些小背景图像集合在大图中，这样服务器只需要请求一次就可以
核心：
精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中大图片也称为sprites 精灵图或者雪碧图移动背景图片的位置可以使用background-position移动的距离就是这个目标图片的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>.sprites {height: 60px;width: 60px;margin: 100px auto;background: url(sprites.png) no-repeat -180px 0;}</style></head><body><div class="sprites"></div></body></html>
案例：精灵图拼名字
<!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>.name span {display: inline-block;background-image: url(abcd.jpg);}.l {width: 110px;height: 150px;background-position: 0 -254px;}.y {width: 110px;height: 130px;background-position: -366px -547px;}.n {width: 120px;height: 150px;background-position: -249px -249px;}.e {width: 110px;height: 130px;background-position: -474px 0;}</style></head><body><div class="name"><span class="l"></span><span class="y"></span><span class="n"></span><span class="n"></span><span class="e"></span></div></body></html>
字体图标
主要用于显示网页中通用、常用的一些小图标。
字体图标展示的是图标，本质属于字体
优点：
轻量级：一个图标字体要比一系列的图像要小，一旦字体加载，图标就会马上渲染出来减少了服务器请求
灵活性：本质其实是文字，可以随意更改颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有的浏览器。
字体图标不能代替精灵图，只是对工作中图标部分技术的提升和优化
字体图标的使用
下载-引用-追加
下载：
icomoon
iconfont
引入：
下载完毕后原先的文件不要删
复制fonts文件夹，放在目录下
在css样式中全局声明字体：将字体文件通过css引入到页面中
在字体文件中的style.css里复制到block为止。
在demo.html里看所有图标，将小框复制到标签中
在对应标签的样式里声明：font-family:' .....';
字体图标的追加
找到压缩包里的selection.json重新上传，然后选中自己想要的新图标，重新下载压缩包并替换原来的文件即可
icomoon import icons-selection.json上传
然后生成新的 替换原文件
字体图标加载的原理
服务器将压缩包内的文件发送给浏览器
