CSS精靈技術（sprite）

精靈技術產生的背景

當用戶訪問一個網站時，需要向伺服器傳送請求，網頁上的每張影象都要經過一次請求才能展現給使用者。

然而，一個網頁中往往會應用很多小的背景影象作為修飾，當網頁中的影象過多時，伺服器就會頻繁地接受和傳送請求，這將大大降低頁面的載入速度。為了有效地減少伺服器接受和傳送請求的次數，提高頁面的載入速度，出現了CSS精靈技術（也稱CSS Sprites、CSS雪碧）。

精靈技術本質

簡單地說，CSS精靈是一種處理網頁背景影象的方式。它將一個頁面涉及到的所有零星背景影象都集中到一張大圖中去，然後將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需向服務傳送一次請求，網頁中的背景影象即可全部展示出來。通常情況下，這個由很多小的背景影象合成的大圖被稱為精靈圖.

精靈技術的使用

CSS 精靈其實是將網頁中的一些背景影象整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖，就需要使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位。

製作精靈圖

CSS 精靈其實是將網頁中的一些背景影象整合到一張大圖中（精靈圖），那我們要做的，就是把小圖拼合成一張大圖。

大部分情況下，精靈圖都是網頁美工做。

我們精靈圖上放的都是小的裝飾性質的背景圖片。 插入圖片不能往上放。
我們精靈圖的寬度取決於最寬的那個背景。 
我們可以橫向擺放也可以縱向擺放，但是每個圖片之間，間隔至少隔開偶數畫素合適。
在我們精靈圖的最低端，留一片空隙，方便我們以後新增其他精靈圖。
 

背景圖片很少的情況，沒有必要使用精靈技術，維護成本太高。 如果是背景圖片比較多，可以建議使用精靈技術。

字型圖示

圖片是有諸多優點的，但是缺點很明顯，比如圖片不但增加了總檔案的大小，還增加了很多額外的"http請求"，這都會大大降低網頁的效能的。更重要的是圖片不能很好的進行“縮放”，因為圖片放大和縮小會失真。 我們後面會學習移動端響應式，很多情況下希望我們的圖示是可以縮放的。此時，一個非常重要的技術出現了，額不是出現了，是以前就有，是被從新"寵幸"啦。。 這就是字型圖示（iconfont).

字型圖示優點

可以做出跟圖片一樣可以做的事情,改變透明度、旋轉度，等..
但是本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果等等...
本身體積更小，但攜帶的資訊並沒有削減。
幾乎支援所有的瀏覽器
移動端裝置必備良藥...
 

設計字型圖示

假如圖示是我們公司單獨設計，這個屬於UI設計人員的工作， 他們在 illustrator 或 Sketch 這類向量圖形軟體裡建立 icon圖示，之後儲存為svg格式，然後給我們前端人員就好了。
如果圖示是大眾的，網上本來就有的，可以直接跳過第一步，進入第三步。

上傳生成字型包

當UI設計人員給我們svg檔案的時候，我們需要轉換成我們頁面能使用的字型檔案， 而且需要生成的是相容性的適合各個瀏覽器的。
​ 推薦網站： http://icomoon.io

下載後把font裡的四個檔案複製到自己的目錄裡

icomoon字型檔

IcoMoon成立於2011年，推出的第一個自定義圖示字型生成器，它允許使用者選擇他們所需要的圖示，使它們成一字型。 內容種類繁多，非常全面，唯一的遺憾是國外伺服器，開啟網速較慢。

推薦網站： http://www.iconfont.cn/

阿里icon font字型檔

http://www.iconfont.cn/

這個是阿里媽媽M2UX的一個icon font字型圖示字型檔，包含了淘寶圖示庫和阿里媽媽圖示庫。可以使用AI製作圖示上傳生成。 一個字，免費，免費！！

fontello

線上定製你自己的icon font字型圖示字型檔，也可以直接從GitHub下載整個圖示集，該專案也是開源的。

Font-Awesome

這是我最喜歡的字型檔之一了，更新比較快。目前已經有369個圖示了。

Glyphicon Halflings

這個字型圖示可以在Bootstrap下免費使用。自帶了200多個圖示。

Icons8

提供PNG免費下載，畫素大能到500PX

字型引入到HTML

<style>
    @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";  /* 一定保證和上面的 font-family: 相同 */
       font-style: normal;  /* 讓傾斜的不傾斜 */
       font-size: 100px;
       color: pink;
   }

   div::before {
       font-family: "icomoon";  /* 一定保證和上面的 font-family: 相同 */
       font-size: 100px;
       color: hotpink;
       content: "\e91b";
}

</style>
<span></span>
<div></div>

如果想要增加新的圖示，需要Import icons,然後選擇上次資料夾裡面的selection.json。然後新增新圖示，下載後在自己的專案裡把fonts替換成剛剛下載的，從demo網站裡選擇需要的即可。