字體圖標(biāo)的原理

什么是字體圖標(biāo)

對于前端的小伙伴來說，字體應(yīng)該是再熟悉不過的東西了，對于文字我們可以通過 css 指定文字對應(yīng)的字體，字號大小，顏色。得益于 css3，我們還可以在 css 中引入服務(wù)端字體來實(shí)現(xiàn)自定義字體。

而字體圖標(biāo)，顧名思義則是把圖標(biāo)當(dāng)做字體來使用，通過使用字體圖標(biāo)，我們可以動態(tài)改變圖標(biāo)的大小、顏色等一系列字體屬性。而且相對于一般的圖片，字體圖標(biāo)的大小改變并不會使圖像變的模糊。

接觸過 bootstrap 的同學(xué)應(yīng)該了解過，bootstrap 里面就預(yù)設(shè)了很多自定義圖標(biāo)，我們只要在元素上指定對應(yīng)的 class，就可以顯示出圖標(biāo)，接下來，我們就來一步步了解這些操作是怎么實(shí)現(xiàn)的。

字體圖標(biāo)和字體的關(guān)系

事實(shí)上，字體圖標(biāo)其實(shí)就是自定義字體，在計算機(jī)系統(tǒng)中每個字符都有一個對應(yīng)的 Unicode 編碼，而每一個字符在操作系統(tǒng)中就是一個矢量圖形，例如“敏”這個字，對應(yīng)的 Unicode 編碼就是 \u654f，而字體文件的作用，就是用來規(guī)定這些編碼對應(yīng)什么樣的圖形。Unicode 字符集里面，E000 至 F8FF 屬于用戶自定義區(qū)域。用戶可以在字體文件里面定義這些字符的對應(yīng)的形狀，通過項(xiàng)目引入加載去找到自定義字符。而字體圖標(biāo)的實(shí)現(xiàn)原理就是在這個自定義區(qū)域中添加一系列的圖標(biāo)，我們通過指定對應(yīng)的 Unicode 編碼來顯示圖片。

先做個總結(jié)：使用瀏覽器打開頁面時，瀏覽器會讀取 HTML 文件進(jìn)行解析渲染。當(dāng)讀到「敏」字時會轉(zhuǎn)換成對應(yīng)的 Unicode 碼（可以認(rèn)為是世界上任意一種文字的特定編號）。再根據(jù) HTML 里設(shè)置的 font-family （如果沒設(shè)置則使用瀏覽器默認(rèn)設(shè)置）去查找電腦里（如果有自定義字體 @font-face ，則加載對應(yīng)字體文件）對應(yīng)字體的字體文件。找到文件后根據(jù) Unicode 碼去查找繪制外形，找到后繪制到頁面上。

那如何讓頁面展示一個圖標(biāo)呢？我們可以把圖標(biāo)當(dāng)成文字來操作，步驟如下：

1.在頁面上放入該圖標(biāo)的 Unicode 碼 （可以自己創(chuàng)建一個）2.讓該元素使用我們自定義的字體3.字體對應(yīng)著我們自己創(chuàng)建的字體庫文件4.字體庫文件里有關(guān)于該 Unicode 碼的外形描述

<span class="icon-qq">span><style>@font-face {  font-family: "hello";  src: url('//at.alicdn.com/t/font_1475388520_7015634.ttf') format('truetype')}.icon-qq:before { font-family:"hello";content: "\e600"; } style>

引入字體圖標(biāo)iconfont可以提高開發(fā)效率和項(xiàng)目的可維護(hù)性。

優(yōu)點(diǎn)

設(shè)計不用再切圖了，更不需要針對不同場景切出大小、顏色、格式等不同的圖片，只需維護(hù)一個圖標(biāo)項(xiàng)目庫即可。

開發(fā)者也不用引用大量圖片，也不需要在js中根據(jù)不同場景切換不同圖片，僅class名就可搞定，修改靈活。尤其在node開發(fā)中，節(jié)省大量代碼，提高可維護(hù)性。

字體圖標(biāo)縮放不失真，不會變模糊。

減少網(wǎng)絡(luò)請求次數(shù)，一個 css 文件可包含所有圖標(biāo)。

節(jié)約流量，圖標(biāo)是圖片格式，每個幾K到幾十K，而 css 文件一般一共只有幾K。

缺點(diǎn)

圖標(biāo)庫包含了所有圖標(biāo)，所以維護(hù)時如果不慎修改了老的圖標(biāo)，下次開發(fā)時更新圖標(biāo)文件就會把潛在影響帶進(jìn)去。所以對以往使用過的老圖標(biāo)的修改刪除要謹(jǐn)慎。

如果同時引用多個項(xiàng)目，可能造成個別圖標(biāo)的沖突。解決方案：

1.避免引用多個項(xiàng)目2.在圖標(biāo)庫中修改沖突圖標(biāo)的Unicode(16進(jìn)制)值。