css精灵图与字体图标

css精灵图与字体图标

一、精灵图

1、通过淘宝网首页查看精灵图的请求过程

2、为什么要用精灵图？

(1)      在网页中引入图片，src的属性值是一个网址，会请求数据，需要时间

3、如何去减轻服务器压力，减少加载图片的时间

①    图片的懒加载

②    精灵图

4、CSS精灵图定义：

①    CSS sprites

②    多个小图标放在一张图片上，然后通过背景方位去展示不同的小图标

5、使用

①    background-image: url(images/img_navsprites.gif);

②     background-position: -46px 0;

6、优点

①    有效地减少服务器接受和发送请求的次数

②    提高页面的加载速度

二、字体图标

1、为什么要用字体图标

①    图片过大，会增加服务器的压力

②    通过样式设置图片会失真

2、定义：是一种字体inconfont可以设置大小颜色

3、下载过程

①    打开http://www.iconfont.cn/登录

②    搜索想要使用的字体图标添加入库

③    在库中创建项目

④    可以编辑字体图标的大小、形状、颜色

⑤    下载至本地

4、使用方法

①    Unicode  

1)        引入iconfont.css

2)        查找对应的字体编码

3)        使用： <span class="iconfont">&#xe601;</span>

②    Font class