本文內容： 精靈圖 字體圖標 首發日期：2018-05-01 精靈圖： 在以前，每個圖片資源都是獨立的一張張圖片，瀏覽器訪問網站中的不同網頁時是重復獲取這一張張圖片的，這代表需要訪問很多次資源。 為了減少資源的訪問次數，將多個常用的圖片集合到一張 ...

1、精靈圖 （1）為什么需要精靈圖 一個網頁中往往會應用到很多小的背景圖片，當網頁中的圖像過多時，服務器就會頻繁地接收和發送請求圖片，造成服務器的壓力過大，這將大大降低頁面的加載速度，精靈圖是將圖片放到一張里面，這樣的話只要請求一次就可以了 精靈圖的出現降低了服務器的壓力，提高了圖片的加載 ...

　　1：CSS雪碧圖：CSS雪碧圖 即 CSS Sprites，也有人叫它CSS精靈圖。 　　2：雪碧圖的由來：一個網站的頁面需要大量的小圖片或者小圖標，但是大量的圖片如果放在服務器上，每次當打開網站並且向服務器發送請求，那么請求的次數將大大增加。由此出現了雪碧圖的概念 　　3：用處：是一種 ...

一、精靈圖使用場景： 二、Css Sprite（優點） 減少圖片的字節。 減少網頁的http請求，從而大大的提高頁面的性能。 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率 ...

本文介紹使用圖標字體和SVG取代雪碧圖的方法。雪碧圖是很多網站經常用到的一種技術，但是它有缺點：高清屏會模糊、無法動態變化如hover時候反色。而使用圖標字體可以完美解決上述問題，同時具備兼容性好，生成的文件小等優點。 雪碧圖 雪碧圖實例：淘寶PC端 將多張小圖放至一張大圖 ...

css sprite 俗稱：精靈圖，雪碧圖，指將整個頁面不同的圖片or圖標合並在一張圖上；優點：使用CSS Sprite 可以減少網絡請求，提高網頁加載性能，不會出現網頁上端加載完畢下面還在加載中這一問題 缺點：如果后期更改其中某一圖標，且其像素大小發生改變，需要重新對所有圖標進行定位 精靈 ...

一、什么是字體圖標 icon font 及使用場景 從百度百科一下什么事icon font，沒有解析。那就用在使用過程的對字體圖標的理解，解釋一下。 字體圖標就是利用字體來顯示網頁中的的純色圖標，或者是特殊字體。舉個栗子，如下圖 這張圖的三個小icon，都是使用字體圖標的，如果不是使用字體 ...

一、什么是雪碧圖？ 1、我們先來看一下淘寶上面用到的雪碧圖實例： a、前端展示 b、css雪碧圖為 2、概念 CSS sprite在國內很多人 ...