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…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。