CSS精靈圖與字體圖標

CSS精靈圖與字體圖標

1. 精靈圖

當用戶訪問一個網站時，須要向服務器發送請求，網頁上的每張圖像都要通過一次請求才能展示給用戶。然而，一個網頁中每每會應用不少小的背景圖像做爲修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大下降頁面的加載速度。爲了有效地減小服務器接受和發送請求的次數，提升頁面的加載速度，出現了CSS精靈技術。

精靈圖主要針對與小的背景圖片使用。咱們在網頁中看到的一些小圖片，好比下圖中圈起來的部分

當你去查看原圖時，會發現顯示出來的是這樣的

這就是精靈圖的應用。使用精靈圖時主要經過background-position調整座標來顯示不一樣的小圖案。

默認精靈圖的左上角對齊座標的原點

當要移動精靈圖來顯示不一樣的圖案時，只能往X的負半軸（左方）和Y的負半軸（上方）移動。對於精靈圖而言是往左上角移動了，故X座標和Y座標都應該爲負數。

2. 字體圖標

2.1 字體圖標的產生

使用場景：主要用於顯示網頁中通用、經常使用的一些小圖標。

精靈圖雖然有不少優勢，可是缺點也很明顯：

1. 圖片文件仍是比較大的
2. 圖片自己放大和縮小會失真
3. 一旦圖片製做完畢想要更換很是複雜

此時，字體圖標iconfont的出現很好的解決了以上的問題。

字體圖標展現的是圖標，本質屬於字體。

2.2 字體圖標的優勢

1. 輕量級：一個圖標字體比一系列的圖像要小，一旦字體加載了，圖標就會立刻渲染出來，減小了服務器請求。
2. 靈活性：本質實際上是文字，能夠隨意改變顏色、產生陰影、透明效果、旋轉等等。
3. 兼容性：幾乎支持全部的瀏覽器。

注：字體圖標不能替代精靈技術，只是對工做中圖標部分技術的提高和優化。

總結：

• 結構和樣式比較簡單的小圖標，就用字體圖標
• 結構和樣式複雜一點的，就用精靈圖

2.3 字體圖標的使用

2.3.1 字體圖標的下載

這裏推薦阿里媽媽M2UX的一個iconfont字體圖標字庫，這個是免費的，包含了淘寶圖標庫和阿里媽媽圖標庫。可使用AI製做圖標上傳生成。

http://www.iconfont.cn

打開以後是這樣的

登陸支持GitHub帳號登陸和新浪微博登陸，要登陸以後才能下載圖標。

找到須要的圖標後，添加到購物車中，方便後續一塊兒打包下載。

上圖是購物車裏的圖標，下面有三種選擇：

1. 添加至項目：將選中的圖標添加到雲端的項目中，方便多人協做，也不會弄丟。
2. 下載素材：將選中的圖標下載到本地中。能夠根據本身的需求選擇顏色、像素、圖標格式。

3. 下載代碼：經過代碼來引入字體圖標。下載後打開壓縮包裏的html文件，裏面有引入的幾種方法的說明。注意下載代碼後要將解壓後的文件夾放到你的項目的font文件夾中！否則會引入不成功

2.3.2 字體圖標的在線使用

這種方法方便修改每一個圖標的樣式，並且也方便添加和刪除圖標，還能多人協做，也能轉讓項目，我的推薦使用這種方法。

首先點進上方導航欄的「資源管理」->「個人項目」

經過「查看在線連接」，生成代碼，將代碼複製到你的項目的css文件中。這裏也是有三種引入方式，自行選擇。