CSS之精灵图(雪碧图)Sprites、字体图标

一、精灵图

精灵图：早期web加载图片需要不断请求，将多个小图片压缩至一张大图片的技术（可以通过移动位置使小图片被还原），由此减少了请求次数，从而提高网页性能。

移动背景图片的位置：background-position

目标图片是通过移动x y轴的坐标实现

一般情况下精灵图需要往左、上两个方向进行移动，故而多数情况下的雪碧图的移动为负值。

FW精灵图位置查找的替代工具（在线工具）：Sprite Cow - Generate CSS for sprite sheets

如下是王者荣耀的精灵图：

html 复制代码

<style>
/*利用精灵图就是用背景图定位,注意点:1.坐标是从左上角出发 2.背景图往反方向移动,所以是负值*/
        .box{
            padding-left: 30px;
            background: url(abcd.png) no-repeat -2px -185px;(红旗背景图定位)
        }
        .box2{
            padding-left: 240px;
            border: 1px solid #000;
            height: 108px;
            line-height: 106px;
            background: url(abcd.png) no-repeat -2px -349px;(新人专区背景图定位)
        }
</style>

二、字体图标

1. 优点

轻量级：一个图标字体比一系列的图像都小，一旦字体还在，图标很快就可以渲染，减少了服务器的请求次数，从而提高网页的性能。

灵活性：本质是文字，可以随意改变大小、颜色等不失真

兼容性：几乎支持所有的浏览器

2. 字体图标的下载网站

https://icomoon.io/app/#/select

阿里巴巴矢量图标库（阿里妈妈）：iconfont-阿里巴巴矢量图标库

字体图标的使用

下载完成后将fonts文件夹放入到html的源文件中（注意：源文件不要删除，后续可以做补充使用）

html 复制代码

ps:为何几乎可以兼容所有的浏览器？

1).TureType( .ttf )格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2).Web Open Font Format( .woff )格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

3).Embedded Open Type( .eot )格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；

4).SVG( .svg )格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

使用时在style标签中添加下述：

html 复制代码

 @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;
 }

给标签定义文字

html 复制代码

 span {
   font-family: "icomoon";
 }

注意名称与之前style中添加的内容要相同

字体图标的追加：