1. 字體圖標使用場景

主要用於顯示網頁中通用或常用的一些小圖標

因為精靈圖有許多優點 但缺點也很明顯:

a. 圖片文件相對較大
b. 圖片本身放大和縮小會失真
c. 圖片製作完畢需要更換不方便

此時就出現了字體圖標icon font 字體圖標來解決問題

字體圖標可以為前端工程師提共一種方便高效的圖標使用方式

展示的是圖標，本質屬於字體。

2. 字體圖標的優點

1. 輕量級 : 一個圖標字體要比圖像要小。當字體加載了圖標會馬上渲染出來，減少了服務器的請求。
2. 靈活性 : 本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果、旋轉等等
3. 兼容性 : 幾乎支持所有的瀏覽器，可以放心使用

注意 : 字體圖標不能完全替代精靈圖，只是對圖標部分進行技術的提升和優化。

3. 如何使用字體圖標

字體圖標是網頁常見的小圖標，直接網上下載即可

使用步驟 :

a. 下載字體圖標

推薦網站 :

• icomoon字庫
  icomoon

b. 字體圖標的引入使用(引入到html頁面中)

下載完畢之後，原先的文件不要刪除，後面還會使用

step 1 : 把下載包裡面的fonts文件夾放入頁面目錄下

step 2 : 在CSS樣式中全局聲明字體 : 把這些字體文件通過CSS引入到我們頁面中，一定要注意字體文件路徑

(下載下來style.css裡面會有代碼 複製到CSS內)

EX :

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?4qserp');
  src:  url('fonts/icomoon.eot?4qserp#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?4qserp') format('truetype'),
    url('fonts/icomoon.woff?4qserp') format('woff'),
    url('fonts/icomoon.svg?4qserp#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

step 3 : 打開demo.HTML檔案 找出框框 複製到 <標籤> 內

step 4 : 給<標籤>指定字體 font-family: 'icomoon';

4.字體圖標的追加(之後需要添加新的小圖標)

原先的字體圖標不夠用，需要添加新的文件圖標，解決方法 :

把壓縮包裡面的selection.json重新上傳，然後選中自己想要的圖標後，重新下載壓縮包並替換原來的文件即可。