起因
現(xiàn)在是前端技術(shù)的大時代。若干年過去之后，也許我們會感慨很多，當年阿當?shù)囊黄┪亩嗝吹南?。vue和angular的鬧劇。最近臨危受命，要做幾天的前端開發(fā)。說是前端開發(fā)，其實就是寫
html+css+JavaScript,真的，當你面對龐大的前端技術(shù)體系無所適從的時候,用最簡單的技術(shù)來一場放松吧。
這一次開發(fā)，沒有什么特別的，就是我在小圖標展示的時候。在雪碧圖和圖標字體中徘徊了很久。于是，簡單研究了一下，就當立一個flag,日后在深究一下。
雪碧圖
除了叫雪碧圖外，它還有很多名字，css sprite, css 精靈等。原理就是將一些小圖標合并到一張圖片上，然后用css的背景定位來顯示需要顯示的部分。
工具：
栗子:
圖片
image
定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css sprite</title>
<style>
.bg{
background: url("css_sprites .png");
}
.bg-9 {
width: 262px; height: 156px;
background-position: -10px -10px;
}
.bg-10 {
width: 246px; height: 150px;
background-position: -292px -10px;
}
</style>
</head>
<body>
<div class="bg bg-9"></div>
<div class="bg bg-10"></div>
</body>
</html>
效果
image
優(yōu)點：
- 減少對服務(wù)器的請求次數(shù)
比如頁面有五個圖標，把他們放到一張背景圖上，只需要加載一次。然后用css定位從這張圖片來取就可以了 - 提高頁面的加載速度
減少了頁面的請求次數(shù)，自然會提高了頁面的加載速度
缺點：
- 維護麻煩，如果修改其中的一張圖，你需要修改整張圖。
- 高清失真，為了適應(yīng)不同的分辨率，可能要準備多個規(guī)格的圖片。
圖標字體
可以縮放的矢量圖標。你可以使用CSS對它們進行修改:大小，顏色，陰影等。體積特別的小?？赡軒装賯€圖標才幾十KB。
工具：
iconfont是阿里提供一個矢量圖標庫。
fontawesome 國外一款優(yōu)秀的圖標庫，用bootstrap的都不陌生了。
栗子:
iconfont和fontawesome官方都提供了很詳細的使用教程，這里不就不做贅述了。
簡單的寫了一個小demo?？梢匀ズ唵蔚目匆幌隆?/p>
優(yōu)點：
- 高清保真，因為是SVG圖形。
- 靈活性，可以設(shè)置大小，顏色等。
- 兼容性好，支持IE6
- 開源的字體庫很多
- 減少HTTP請求
缺點：
- 維護自己的字體庫麻煩一些
- 圖表字體只能被渲染為單色的
總結(jié)
這篇文章只是淺談了一些雪碧圖和圖標字體，沒有太過的深入，也算是一篇工具介紹吧。這兩種方式的出現(xiàn)，都是為了減少HTTP請求次數(shù)。優(yōu)化和提升網(wǎng)頁的訪問速度。各有千秋。如果實際開發(fā)中，可以兩種方式結(jié)合著來。
