精灵技术
图片请求.png
图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
精灵技术本质
简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图），如下图所示为京东网站中的一个精灵图。
jds.png
精灵技术的使用
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。关于CSS的背景技术详情可以查看如下的一片文章--CSS背景技术详解
CSS精灵图的使用中最重要的就是background-position的数值，第一个数值是x的值，第二个值y轴的数值，这个数值在fireworks中可以得到，具体的操作如下所示：
精灵图操作.gif
其次需要注意的是需要给定所需要背景图的宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS精灵图</title>
<!-- 快捷键ctrl + enter是快速的切换到下一行 -->
<style>
.mobile {
width: 15px;
height: 20px;
background:url(images/jd.png) 0 -100px no-repeat;
}
</style>
</head>
<body>
<div class="mobile"></div>
</body>
</html>
字体图标
图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 移动端响应式的设计中，很多情况下希望图标是可以缩放的。此时， 就可以用字体图标（iconfont)。
字体图标优点
- 可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
- 本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
- 本身体积更小，但携带的信息并没有削减。
- 几乎支持所有的浏览器
- 移动端设备必备良药...
字体图标使用流程
总体来说，字体图标按照如下流程：
fontt.png
设计字体图标
假如图标是公司单独设计，那就需要第一步了，这个属于UI设计人员的工作， 他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标， 比如下图：
字体图标.jpg
上传生成字体包
当UI设计人员设计好svg文件，需要转换成页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。
推荐网站： http://icomoon.io
阿里icon font字库：http://www.iconfont.cn/
下载兼容字体包
刚才上传完毕， 网站会把UI做的svg图片转换为字体格式， 然后下载下来就好了
使用的具体操作如下所示：
字体图操作.gif
字体引入到HTML
得到压缩包之后，最后一步，是最重要的一步了， 就是字体文件已经有了，需要引入到页面中。
- 首先把 以下4个文件放入到 fonts文件夹里面。
fonts文件
第一步：在样式里面声明字体
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
第二步：给盒子使用字体
span {
font-family: "icomoon";
}
第三步：盒子里面添加结构
span::before {
content: "\e900";
}
或者是把字体图标引入进来
<span></span>
简单的例子代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字体图标的使用</title>
<style>
@font-face {
font-family: 'icomoon';
/*这里的字体需要和span的font-family一致*/
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
font-family: "icomoon";
}
span::before {
content: "\e912";
/* 这里的字体图标在生成的demo.html中进行寻找 */
}
</style>
</head>
<body>
<span></span>
</body>
</html>
追加新图标到原来库里面
如果工作中，原来的字体图标不够用了，需要添加新的字体图标，但是原来的不能删除，继续使用，解决方法如下：
把压缩包里面的selection.json 从新上传，然后，选中想要新的图标，从新下载压缩包，替换原来文件即可。
网友评论