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

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

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

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

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

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

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

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

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

1.在頁面上放入該圖標(biāo)的 Unicode 碼 （可以自己創(chuàng)建一個(gè)）2.讓該元素使用我們自定義的字體3.字體對(duì)應(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è)計(jì)不用再切圖了，更不需要針對(duì)不同場景切出大小、顏色、格式等不同的圖片，只需維護(hù)一個(gè)圖標(biāo)項(xiàng)目庫即可。

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

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

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

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

缺點(diǎn)

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

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

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