精靈技術(shù)
圖所示為網(wǎng)頁的請求原理圖，當用戶訪問一個網(wǎng)站時，需要向服務(wù)器發(fā)送請求悠抹，網(wǎng)頁上的每張圖像都要經(jīng)過一次請求才能展現(xiàn)給用戶珠月。
然而，一個網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾楔敌，當網(wǎng)頁中的圖像過多時啤挎，服務(wù)器就會頻繁地接受和發(fā)送請求，這將大大降低頁面的加載速度卵凑。為了有效地減少服務(wù)器接受和發(fā)送請求的次數(shù)庆聘，提高頁面的加載速度，出現(xiàn)了CSS精靈技術(shù)（也稱CSS Sprites勺卢、CSS雪碧）伙判。
精靈技術(shù)本質(zhì)
簡單地說，CSS精靈是一種處理網(wǎng)頁背景圖像的方式值漫。它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去澳腹，然后將大圖應(yīng)用于網(wǎng)頁，這樣杨何，當用戶訪問該頁面時酱塔，只需向服務(wù)發(fā)送一次請求，網(wǎng)頁中的背景圖像即可全部展示出來危虱。通常情況下羊娃，這個由很多小的背景圖像合成的大圖被稱為精靈圖（雪碧圖），如下圖所示為京東網(wǎng)站中的一個精靈圖埃跷。
精靈技術(shù)的使用
CSS 精靈其實是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖）蕊玷，然而，各個網(wǎng)頁元素通常只需要精靈圖中不同位置的某個小圖弥雹，要想精確定位到精靈圖中的某個小圖垃帅，就需要使用CSS的background-image、background-repeat和background-position屬性進行背景定位剪勿，其中最關(guān)鍵的是使用background-position屬性精確地定位贸诚。關(guān)于CSS的背景技術(shù)詳情可以查看如下的一片文章--CSS背景技術(shù)詳解
CSS精靈圖的使用中最重要的就是background-position的數(shù)值，第一個數(shù)值是x的值厕吉，第二個值y軸的數(shù)值酱固，這個數(shù)值在fireworks中可以得到，具體的操作如下所示：
其次需要注意的是需要給定所需要背景圖的寬度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS精靈圖</title>
<!-- 快捷鍵ctrl + enter是快速的切換到下一行 -->
<style>
.mobile {
width: 15px;
height: 20px;
background:url(images/jd.png) 0 -100px no-repeat;
}
</style>
</head>
<body>
<div class="mobile"></div>
</body>
</html>
字體圖標
圖片是有諸多優(yōu)點的头朱，但是缺點很明顯运悲，比如圖片不但增加了總文件的大小项钮，還增加了很多額外的"http請求"班眯，這都會大大降低網(wǎng)頁的性能的。更重要的是圖片不能很好的進行“縮放”鳖敷，因為圖片放大和縮小會失真。 移動端響應(yīng)式的設(shè)計中定踱，很多情況下希望圖標是可以縮放的。此時恃鞋， 就可以用字體圖標（iconfont)崖媚。
字體圖標優(yōu)點
- 可以做出跟圖片一樣可以做的事情,改變透明度、旋轉(zhuǎn)度恤浪，等..
- 本質(zhì)其實是文字畅哑，可以很隨意的改變顏色、產(chǎn)生陰影水由、透明效果等等...
- 本身體積更小荠呐，但攜帶的信息并沒有削減。
- 幾乎支持所有的瀏覽器
- 移動端設(shè)備必備良藥...
字體圖標使用流程
總體來說砂客，字體圖標按照如下流程：
設(shè)計字體圖標
假如圖標是公司單獨設(shè)計泥张，那就需要第一步了，這個屬于UI設(shè)計人員的工作鞠值， 他們在 illustrator 或 Sketch 這類矢量圖形軟件里創(chuàng)建 icon圖標媚创， 比如下圖：
上傳生成字體包
當UI設(shè)計人員設(shè)計好svg文件，需要轉(zhuǎn)換成頁面能使用的字體文件彤恶， 而且需要生成的是兼容性的適合各個瀏覽器的钞钙。
推薦網(wǎng)站： http://icomoon.io
阿里icon font字庫：http://www.iconfont.cn/
下載兼容字體包
剛才上傳完畢， 網(wǎng)站會把UI做的svg圖片轉(zhuǎn)換為字體格式声离， 然后下載下來就好了
使用的具體操作如下所示：
字體引入到HTML
得到壓縮包之后芒炼，最后一步，是最重要的一步了术徊， 就是字體文件已經(jīng)有了本刽，需要引入到頁面中。
- 首先把 以下4個文件放入到 fonts文件夾里面弧关。
fonts文件
第一步：在樣式里面聲明字體
@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";
}
第三步：盒子里面添加結(jié)構(gòu)
span::before {
content: "\e900";
}
或者是把字體圖標引入進來
<span>?</span>
簡單的例子代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字體圖標的使用</title>
<style>
@font-face {
font-family: 'icomoon';
/*這里的字體需要和span的font-family一致*/
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";
}
span::before {
content: "\e912";
/* 這里的字體圖標在生成的demo.html中進行尋找 */
}
</style>
</head>
<body>
<span>?</span>
</body>
</html>
追加新圖標到原來庫里面
如果工作中盅安，原來的字體圖標不夠用了，需要添加新的字體圖標世囊，但是原來的不能刪除别瞭，繼續(xù)使用，解決方法如下：
把壓縮包里面的selection.json 從新上傳株憾，然后蝙寨，選中想要新的圖標晒衩，從新下載壓縮包，替換原來文件即可墙歪。
