字體圖標(biāo)（iconfont)

圖片是有諸多優(yōu)點(diǎn)的，但是缺點(diǎn)很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請(qǐng)求"，這都會(huì)的大大降低網(wǎng)頁(yè)的性能。更重要的是圖片不能很好的進(jìn)行“縮放”，因?yàn)閳D片放大和縮小會(huì)失真。 我們后面會(huì)學(xué)習(xí)移動(dòng)端響應(yīng)式，很多情況下希望我們的圖標(biāo)是可以縮放的。此時(shí)，一個(gè)非常重要的技術(shù)出現(xiàn)了，額不是出現(xiàn)了，是以前就有，是被從新"寵幸"啦。。 這就是字體圖標(biāo)（iconfont).

字體圖標(biāo)優(yōu)點(diǎn)

可以做出跟圖片一樣可以做的事情，改變透明度、旋轉(zhuǎn)度，等..
但是本質(zhì)其實(shí)是文字，可以很隨意的改變顏色、產(chǎn)生陰影、透明效果等等...
本身體積更小，但攜帶的信息并沒(méi)有削減。
幾乎支持所有的瀏覽器
移動(dòng)端設(shè)備必備良藥...

字體圖標(biāo)使用流程

字體圖標(biāo)流程

1. 設(shè)計(jì)字體圖標(biāo)

假如圖標(biāo)是公司單獨(dú)設(shè)計(jì)，那就需要第一步了，這個(gè)屬于UI設(shè)計(jì)人員的工作， 他們?cè)?illustrator 或 Sketch 這類矢量圖形軟件里創(chuàng)建 icon圖標(biāo)， 比如下圖：

之后保存為svg格式，然后給前端人員就好了。
如果圖標(biāo)是大眾的，可以直接跳過(guò)第一二步，進(jìn)入第三步。

2. 上傳生成字體包

當(dāng)UI設(shè)計(jì)人員給我們svg文件的時(shí)候，我們需要轉(zhuǎn)換成我們頁(yè)面能使用的字體文件， 而且需要生成的是兼容性的適合各個(gè)瀏覽器的。

icomoon字庫(kù)(推薦)： http://icomoon.io

IcoMoon成立于2011年，推出的第一個(gè)自定義圖標(biāo)字體生成器，它允許用戶選擇他們所需要的圖標(biāo)，使它們成一字型。 內(nèi)容種類繁多，非常全面，唯一的遺憾是國(guó)外服務(wù)器，打開(kāi)網(wǎng)速較慢。

阿里icon font字庫(kù)： http://www.iconfont.cn/

這個(gè)是阿里媽媽M2UX的一個(gè)icon font字體圖標(biāo)字庫(kù)，包含了淘寶圖標(biāo)庫(kù)和阿里媽媽圖標(biāo)庫(kù)?？梢允褂肁I制作圖標(biāo)上傳生成。 一個(gè)字，免費(fèi)，免費(fèi)！！

fontello：http://fontello.com/

在線定制你自己的icon font字體圖標(biāo)字庫(kù)，也可以直接從GitHub下載整個(gè)圖標(biāo)集，該項(xiàng)目也是開(kāi)源的。

Font-Awesome：http://fortawesome.github.io/Font-Awesome/

這是我最喜歡的字庫(kù)之一了，更新比較快。目前已經(jīng)有369個(gè)圖標(biāo)了。

Glyphicon Halflings：http://glyphicons.com/

這個(gè)字體圖標(biāo)可以在Bootstrap下免費(fèi)使用。自帶了200多個(gè)圖標(biāo)。

Icons8：https://icons8.com/

提供PNG免費(fèi)下載，像素大能到500PX

3. 下載兼容字體包

上傳完畢， 網(wǎng)站會(huì)給svg圖片轉(zhuǎn)換為字體格式， 然后下載下來(lái)就好了
當(dāng)然，也可以直接到剛才的網(wǎng)站上找喜歡的字體圖標(biāo)下載使用。
以 icomoon 為例：

• 進(jìn)入網(wǎng)站 https://icomoon.io 點(diǎn)擊右上角的 IcoMoon App 按鈕，進(jìn)入圖標(biāo)界面。
• （上傳UI設(shè)計(jì)的svg圖標(biāo)）把svg文件拖拽到 untitled Set 欄中

• 單擊選中需要的字體圖標(biāo)（也可以通過(guò)點(diǎn)擊下面的lab，去庫(kù)中尋找更多的字體圖標(biāo)），點(diǎn)擊 Cenerate Font 即可跳轉(zhuǎn)到字體圖標(biāo)到預(yù)覽界面，可以通過(guò)點(diǎn)擊下載旁邊的設(shè)置按鈕進(jìn)行字體圖標(biāo)的名稱、瀏覽器支持等的設(shè)置，點(diǎn)擊 DownLoad 自動(dòng)下載字體圖標(biāo)的壓縮包。

4. 字體引入到HTML

得到壓縮包之后，最后一步，是最重要的一步了， 就是字體文件已經(jīng)有了，我們需要引入到我們頁(yè)面中。

1. 首先把 以下4個(gè)文件放入到 fonts文件夾里面，把 fonts文件夾 復(fù)制到項(xiàng)目中。

• 第一步：在樣式里面聲明字體： 告訴別人我們自己定義的字體（注意路徑和名字）

@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";
    }

或者 (直接復(fù)制右側(cè)的小手機(jī))

   <span>?</span>  

5. 追加新圖標(biāo)到原來(lái)庫(kù)里面

如果工作中，原來(lái)的字體圖標(biāo)不夠用了，我們需要添加新的字體圖標(biāo)，但是原來(lái)的不能刪除，繼續(xù)使用，此時(shí)我們需要這樣做

把壓縮包里面的selection.json重新上傳 (import icons 按鈕)，然后選中自己想要新的圖標(biāo)，從新下載壓縮包，替換原來(lái)文件即可。

精靈圖

精靈技術(shù)產(chǎn)生的背景

當(dāng)用戶訪問(wèn)一個(gè)網(wǎng)站時(shí)，需要向服務(wù)器發(fā)送請(qǐng)求，網(wǎng)頁(yè)上的每張圖像都要經(jīng)過(guò)一次請(qǐng)求才能展現(xiàn)給用戶。

然而，一個(gè)網(wǎng)頁(yè)中往往會(huì)應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁(yè)中的圖像過(guò)多時(shí)，服務(wù)器就會(huì)頻繁地接受和發(fā)送請(qǐng)求，這將大大降低頁(yè)面的加載速度。為了有效地減少服務(wù)器接受和發(fā)送請(qǐng)求的次數(shù)，提高頁(yè)面的加載速度，出現(xiàn)了CSS精靈技術(shù)（也稱CSS Sprites、CSS雪碧）。

精靈技術(shù)本質(zhì)

簡(jiǎn)單地說(shuō)，CSS精靈是一種處理網(wǎng)頁(yè)背景圖像的方式。它將一個(gè)頁(yè)面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應(yīng)用于網(wǎng)頁(yè)，這樣，當(dāng)用戶訪問(wèn)該頁(yè)面時(shí)，只需向服務(wù)發(fā)送一次請(qǐng)求，網(wǎng)頁(yè)中的背景圖像即可全部展示出來(lái)。通常情況下，這個(gè)由很多小的背景圖像合成的大圖被稱為精靈圖（雪碧圖）。

京東網(wǎng)站中的一個(gè)精靈圖

精靈技術(shù)的使用

CSS 精靈其實(shí)是將網(wǎng)頁(yè)中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個(gè)網(wǎng)頁(yè)元素通常只需要精靈圖中不同位置的某個(gè)小圖，要想精確定位到精靈圖中的某個(gè)小圖，就需要使用CSS的background-image、background-repeat和background-position屬性進(jìn)行背景定位。

.mobile {
    width: 15px;
    height: 20px;
    background: url(images/jd.png) no-repeat  0 -100px;
}

1. 設(shè)定小圖片寬高
2. 加載大圖片，確定小圖片位置

最關(guān)鍵的是使用background-position屬性精確地定位。因?yàn)樽鴺?biāo)方向的問(wèn)題，background-position屬性值都 <= 0

制作精靈圖

CSS 精靈其實(shí)是將網(wǎng)頁(yè)中的一些背景圖像整合到一張大圖中（精靈圖），那我們要做的，就是把小圖拼合成一張大圖。

大部分情況下，精靈圖都是網(wǎng)頁(yè)美工做。

我們精靈圖上放的都是小的裝飾性質(zhì)的背景圖片。 插入圖片不能往上放。
我們精靈圖的寬度取決于最寬的那個(gè)背景。 
我們可以橫向擺放也可以縱向擺放，但是每個(gè)圖片之間，間隔至少隔開(kāi)偶數(shù)像素合適。
在我們精靈圖的最低端，留一片空隙，方便我們以后添加其他精靈圖。

結(jié)束語(yǔ)： 小公司，背景圖片很少的情況，沒(méi)有必要使用精靈技術(shù)，維護(hù)成本太高。 如果是背景圖片比較多，可以建議使用精靈技術(shù)。