css雪碧圖（精靈圖）與字體圖標的介紹以及對比
設想一個實際場景：在一個頁面為了展示，我們放置了很多獨立的小圖片，瀏覽器在顯示頁面的時候，就需要向服務器就會發送很多請求，來獲取並加載這些小圖片，但是這樣的話，就會導致請求數量太多，造成資源浪費，以及訪問速度變慢。
碰到這樣的情況，可以使用兩種方式解決這種問題：CSS雪碧圖以及字體圖標。但是這兩種方式也都有不同的適用場景，需要根據實際需求來做取舍。
1.CSS雪碧圖簡介
CSS雪碧圖 即 CSS Sprites，也有人叫它CSS精靈圖，是一種CSS圖像合並技術，該方法是將眾多小圖標合並到同一張圖上，用以減輕http請求壓力。然后通過操作CSS的background屬性，控制背景的位置以及大小，來展示需要的部分。
不過大背景圖還是自己單獨一張比較好，此方法適用於圖片體積較小且數量較多的情況。
下面就是一張CSS雪碧圖，這些圖標展示是固定的，數量較多且單個體積小，正適合使用雪碧圖。
下面是demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 同一張背景圖，只是位置不同 */
.common {
width: 11px;
height: 14px;
background-image: url("https://jhcan333.github.io/can-Share/preview/cssSpritesAndIconFont/images/sprites.png");
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屬性來對它進行控制。
使用步驟如下：
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雪碧圖和字體圖標因為本質上的不同（一個是圖片，一個是文字），造成了其所適用的場景不同。
在一些對分辨率要求不高、展示的圖標色彩豐富、圖標變化不多的情況下，可以選用雪碧圖。而對於那種多場景多分辨率下展示、單圖標顏色單一、圖標的顏色變化較多的情況下，比較適合使用字體圖標。
github地址：https://github.com/JHCan333/can-Share/tree/master/preview/cssSpritesAndIconFont
最近在搞一個和前端程序員相關的公號，除了技術分享之外，也增加了對於職業發展、生活記錄之類的文章，歡迎大家關注，一起聊天、吐槽，一起努力工作，認真生活！
