精灵图和字体图标的概念

一、精灵图

概念：将网页的所需要一些小背景图像整合到一张大的图片中，在css中利用"background-image"、"background-repeat"、"background-position"、"background-size"的组合找到需精灵图。

“background-position”可以用数字精确地定位出背景图片的位置；"background-size"可以利用数字来改变所定位精灵图的大小。

作用：为了有效减少服务器接收和发送请求的次数，从而提高页面的加载速度。

二、字体图标

概念：字体以图标的显示，看似是图标其实是字体；可以利用css像控制字体大小、颜色那样来控制字体图标样式，但是前提需要去网上下载字体图标。

这里提供两个网站下载字体图标：

1.http://icomoon.io

2.http://www.iconfont.cn

优点：灵活，轻量级，兼容性好；图标易于缩放，是矢量图不会失真，也可以创建自己的图标字。