css雪碧图（精灵图）与字体图标的介绍以及对比

时间 2019-11-08

标签 css 雪碧精灵字体图标介绍以及对比栏目 CSS 繁體版

原文原文链接

设想一个实际场景：在一个页面为了展现，咱们放置了不少独立的小图片，浏览器在显示页面的时候，就须要向服务器就会发送不少请求，来获取并加载这些小图片，可是这样的话，就会致使请求数量太多，形成资源浪费，以及访问速度变慢。css

碰到这样的状况，可使用两种方式解决这种问题：CSS雪碧图以及字体图标。可是这两种方式也都有不一样的适用场景，须要根据实际需求来作取舍。html

1.CSS雪碧图简介

CSS雪碧图即 CSS Sprites，也有人叫它CSS精灵图，是一种CSS图像合并技术，该方法是将众多小图标合并到同一张图上，用以减轻http请求压力。而后经过操做CSS的background属性，控制背景的位置以及大小，来展现须要的部分。git

不过大背景图仍是本身单独一张比较好，此方法适用于图片体积较小且数量较多的状况。github

下面就是一张CSS雪碧图，这些图标展现是固定的，数量较多且单个体积小，正适合使用雪碧图。浏览器

下面是demo：bash

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 同一张背景图，只是位置不一样 */
        .common {
            width: 11px;
            height: 14px;
            background-image: url("https://user-gold-cdn.xitu.io/2019/9/24/16d6248147f2c0b8?w=331&h=14&f=png&s=5309");
            background-repeat: no-repeat;
        }
        
        .test1 {
            background-position: 0px 0px;
        }

        .test2 {
            background-position: -26px 0px;
        }

        .line div {
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="line">
    <div>test1</div><div class="common test1"></div>
</div>
<div class="line">
    <div>test2</div><div class="common test2"></div>
</div>
</body>
</html>
复制代码

展现效果以下:服务器

2.字体图标简介

经过一些工具软件，将图片转换成字体图标。这些字体图标能够像字体同样使用，可使用字体相关的CSS属性来对它进行控制。svg

使用步骤以下：

1.把字体图标下载下来放置到网页所在目录中 2.经过 @font-face 声明自定义的字体。并应用到须要的地方，这里简单写的，设置成了 * 。以下例：工具

@font-face {
    font-family: 'demo'; // 定义字体的名字
    src: url('fonts/demo.eot?9ruqhl');
    src: url('fonts/demo.eot?9ruqhl#iefix') format('embedded-opentype'),
    url('fonts/demo.ttf?9ruqhl') format('truetype'),
    url('fonts/demo.woff?9ruqhl') format('woff'),
    url('fonts/demo.svg?9ruqhl#demo') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'demo' !important; // 在须要的元素中定义所用字体
    speak: none;
}
复制代码

3.为了方便，可使用专门的 class 表示该图标，而且使用伪类为该元素添加内容，以下例：字体

.icon-close:before {
    content: "\e900";
}

.icon-help:before {
    content: "\e901";
}

.icon-lock:before {
    content: "\e902";
}
复制代码

4.在页面中添加元素而且设置已经设置好的class，以下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="./style/style.css">
        <style>
            .icon-large {
                font-size: 40px;
                color:orange;
            }
    
            .icon-normal {
                font-size: 32px;
                color: #fc5830;
            }
    
            .icon-small {
                font-size: 24px;
                color:#0079cc;
            }
    
        </style>
    </head>
    <body>
        <span class="icon-close icon-large"></span>
        <span class="icon-help icon-normal"></span>
        <span class="icon-lock icon-small"></span>
    </body>
</html>
复制代码

5.展现效果以下：

3.两种方式如何取舍？

以上两种方式雪碧图和字体图标均可以解决图片数量多且体积小场景下的问题，可是二者在应用中也是须要根据实际状况来进行判断取舍。

CSS雪碧图和字体图标对比状况以下

对比角度	CSS雪碧图	字体图标
作动画	图片作动画较合适	作动画的话，不如图片
高分辨率	图片在高分辨率下会模糊	字体图标是文字，受分辨率影响小
多色展现	图片多色图片展现很好实现	多色图标目前来看比较难实现
图标变换颜色或者其余效果	须要换一个图片	改变一下文字的color就好
文件体积	图片体积较大	字体图标体积较小
实现简单icon	体积大、变化不灵活	体积小、方便添加效果

从上面能够看出，CSS雪碧图和字体图标由于本质上的不一样（一个是图片，一个是文字），形成了其所适用的场景不一样。

在一些对分辨率要求不高、展现的图标色彩丰富、图标变化很少的状况下，能够选用雪碧图。而对于那种多场景多分辨率下展现、单图标颜色单1、图标的颜色变化较多的状况下，比较适合使用字体图标。

github地址：github.com/JHCan333/ca…