CSS-- 精灵图和字体图标

一、精灵图

1.1、为什么要使用精灵图？

浏览器每解析到一张图片就会向服务器发起请求，请求服务器将图片发送过来，如果网页中有大量的图片，例如一千张，那就得请求一千次，这样服务器的压力就会很多，所以将一些小背景整合到一张图片（精灵图）上，就只需要请求一次，服务器的压力就大大的得到了缓解。

1.2、 精灵图使用的核心

• 精灵技术主要针对于背景图片使用，就是把多个小背景整合到一张图片中；
• 这个大图片也称为sprites，精灵图，或者雪碧图；
• 移动背景图片位置，此时可以使用background-position；
• 移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标系是x向右是正方向，y向下正方向；
• 因为一般情况下都是往上往左移动，所以数值是负值；
• 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

---

二、 字体图标

2.1、字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常用的小图标。

精灵图是有诸多优点，但是缺点很明显：

• 图片文件还是比较大的；
• 图片本身放大和缩小会失真；
• 一旦图片制作完毕想要跟换非常复杂；

此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2.2、字体图标的优点

• 轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求；
• 灵活性：本质其实是文字，可以随意的改变颜色，产生阴影，透明效果，旋转等；
• 兼容性：几乎支持所有的浏览器，请放心使用；

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

总结：

• 如果遇到一些结构和样式比价简单的小图标，就用字体图标；
• 如果遇到一些结构和样式复杂一点的小图片，就用精灵图；

2.3、字体图标的下载

推荐下载网站：

• icomoon字库 http://icomoon.io
  IcoMoon成立于2011年，推出了第一个自定义图标字体生成器，它允许用于选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

• 阿里iconfont字库 http://www.iconfont.cn
  这个是阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。重点是，免费！

例如：使用icomoon下载字体图标

①、进入网站，点击右侧框选部分

②、直接选择自己需要的图标，底部中间框选部分会显示选择的个数

③、把图标生成字体，点击右侧底部框选部分Generate Font

④、点击右侧底部框选部分下载字体图标Download

⑤、下载结果

2.4、字体图标的使用

注意：下载完毕之后，注意原先的文件不要删除，后期更新字体图标的时有用

①、把下载包里面的fonts文件夹放入页面根目录下

②、在CSS样式中全局声明字体：简单理解把这些字体文件通过CSS引入到我们的页面中，一定注意字体文件路径问题。

将下载包里的style.css中的第一部分复制到我们的CSS样式表中：


③、从下载包中的demo.html中将字体图标复制到要想使用的地方并指定字体即可

---

或者：

<div>
	\ea50
</div>

---

2.5、字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的selection.json重新上传，然后选中自己想要的图标，重新生成字体图标并压缩，然后替换原来的文件即可。