精灵图与字体图标相关
精灵图
目的：为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度
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>
<span></span>
</body>
</html>
