精灵图与字体图标相关

精灵图
目的：为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度
sprites的使用
1.精灵技术主要针对背景图片使用，就是把多个小背景图片整合到一个大图片中
2.这个大图片也被称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以用 background-position
4.移动的距离就是这个目标图片的x和y的坐标。注意网页中的坐标有所不同
5.因为一半情况下都是往上往左移动，所以数值是负值。
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

字体图标
结构样式简单的图标用字体图标
1.解压出来的文件夹font放到根目录下
2.字体声明
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

3.打开demo.html 找到想要的字体复制出来

4.设置字体
span {
font-family: 'icomoon';
font-size: 100px;
color: red;
}
例子：
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 字体声明 */

@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

span {
font-family: 'icomoon';
font-size: 100px;
color: red;
}
</style>
</head>

</body>

</html>