精灵技术

图片请求.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>