1. 图像的灵活使用（拓展）

1.1 引言

网页上我们经常能够看到大量图标图片使用

若每张图片都单独进行一次传输，效率会很低。

好比：我们去超市买水果，若买一个带回家一个，那么效率很低，不如买完一次性打包带回家更方便。

这个网页数据传输道理相同，所以我们的选择是将当前页面所需要的图标图片一次性打包传输，方便使用。

所以，为了提高页面加载效率，这里我们就需要学习 CSS 的精灵图和字体图标。

1.2 精灵图

1.2.1 概念

1.2.2 步骤解析

1、在精灵图上，找到要使用的图片，测量其宽高

2、以 div 为例，为其设置和图片相同的宽高（加边框仅为了方便演示）

3、通过背景图片引入，不能重复

4、因为现在显示的背景图默认为左上角，我们要通过 background-position 来调节。

5、从图片左上角 测量 距离目标图像左上角的距离（注意，不要覆盖了目标图像）

6、通过测量得知，目标图像左上角坐标：x=275,y=200

设置时，全部更改为负数即可实现

1.2.3 总结

精灵图通过背景图片、背景位置结合使用，可以提高页面加载的效率，在后期页面美化中使用较为频繁。

1.3 字体图标

1.3.1 引言&概念

精灵图虽然可以提高页面加载效率，但是精灵图同样也存在问题：

1 、 图片放大失真

2 、 图片过大，加载速度过慢，导致网页在加载初期看不到任何图像

3 、 如果想为精灵图添加或者减少图标，要对整体修改，加大了精灵图修改难度

所以，为了弥补精灵图的不足之处，我们还需要学习字体图标，来和精灵图结合使用。

字体图标：引入第三方特殊字体，以特殊字体显示为图片图标。

注：因为在计算机中，字体的本质就是图片，所以又称为图标字体。

优点：

1 、轻量级：字体加载速度极快。

2 、灵活：可以为字体加入颜色、大小、阴影等字体样式

3 、兼容性：支持几乎所有浏览器

4 、效率高：减少了数据传输次数

1.3.2 项目准备

可以使用老师提供的资源，也可以进行如下自由下载

1、登陆 阿里字体图标库，搜索你需要的字体：http://www.iconfont.cn

2 、例如搜索：“Java ”

3、把需要的图标添加到购物车中

4、选择过各种图标后，点击购物车

5、点击“下载代码” 

6、下载完毕，所有代码都在 download.zip 中