字體圖標技術在前端設計中的應用

趙文艷

摘 要：圖標在前端設計中應用廣泛，主要的圖標技術有雪碧圖（sprite），純CSS3圖標和字體圖標三種，這三種方案各有優劣。文章主要闡述了字體圖標技術特點，重點說明了如何應用該技術。

關鍵詞：字體圖標;前端設計

在前端設計中，必不可免的要用到各式各樣的圖標，它們能夠對產品功能進行劃分，也能給用戶好的視覺體驗。應用這些圖標的前端技術主要有三種：第一種是雪碧圖（sprite）方案，是將多個小圖標整合在大圖片中，通過CSS中的background相關屬性對圖片進行布局定位。該方案的好處在于減少服務器請求次數，提高頁面顯示性能，缺點是修改不易，而且受分辨率的影響。第二種是純CSS繪畫圖標，優點是代碼實現，可縮放，性能高，缺點是對設計者要求高，復雜的圖案設計困難，還存在兼容性問題。第三種是文章闡述的字體圖標技術。

1 生成字體圖標

1.1 字體文件類型

不同的瀏覽器對字體格式的支持是不同的，下面簡要介紹字體的幾種格式。

EOT。只有IE瀏覽器才支持的字體格式，需要使用專門的工具將常規字體轉為該格式。

TrueType和OpenType。電腦中常見的字體格式，后綴名是“.ttf”和“.otf”。

WOFF。專門為WEB設計的字體格式，可以看作是TrueType和OpenType的壓縮版，文件體積更小，因此下載速度也會更快。

SVG。它本身不是字體格式，而是可縮放矢量圖形的繪制方式，缺點是體積大。

因為瀏覽器兼容問題，在使用字體文件時，不能只選取一種類型。而是選取多種類型，瀏覽器自主選擇支持的類型下載。

1.2 生成字體圖標的網站

使用字體圖標首先要生成字體圖標，在網絡上有很多提供免費字體的網站。這里介紹兩個比較熱門的字體圖標生成網站。

Iconmoon（http：//www.iconmoon.io）。可以選擇單個下載與打包下載，下載格式為zip，解壓后會有不同格式與大小的多種圖標，方便使用。

Iconfont（http：//www.iconfont.cn）。阿里巴巴圖標庫，國內設計師的原創作品，有官方與色彩圖標分類，線條圓滑，風格多樣，包含許多國內應用和具有中國特色的圖標。下載時需要登陸，可以收藏圖標，大多數為免費下載。

1.3 字體圖標的生成

以阿里巴巴圖標庫為例，進入網站后，先使用賬戶進行登錄，然后自由選擇需要的圖標庫，單擊購物車圖標將選中的圖標加入購物車，選擇圖標完畢，單擊購物車圖標進入下載頁面，選擇“下載代碼”將制作好的字體圖標下載到本地。將下載好的文件解壓縮，得到九個文件。其中demo.css和demo_index.html是官方提供的演示案例，供用戶參考。.eot，.svg，.ttf，.woff，.woff2格式的五個文件是字體圖標文件。.js文件是為了描繪彩色圖標。Iconfont.css文件是字體圖標應用的CSS樣式。

2 字體圖標的應用

2.1 普通字體圖標的使用

將解壓好的阿里圖標文件拷貝到項目目錄的預設文件夾內，在項目中引入iconfont.css文件，或將iconfont.css文件里的內容復制粘貼到項目的css內容里。

在項目需要使用圖標的位置添加諸如i，span等類似的掛鉤標簽，為標簽添加兩個類名。一個固定的是iconfont，另一個是要使用圖標對應的類名。

2.2 彩色圖標的使用

Iconfont提供了Symbol 圖標引用方式，該用法的實質是做了一個 SVG 的集合。優點是可以顯示彩色圖標，缺點是兼容性差，瀏覽器渲染的性能一般。

首先需要在項目頁中引入下載包中的 symbol 代碼：

加入CSS樣式，設定圖標的寬高：

.icon { width：1em;height：1em;vertical-align：-0.15em;fill：currentColor;overflow：hidden;}

挑選相應圖標并獲取類名，例如類名為icon-fanqie，應用于頁面：

3 結語

以阿里巴巴字體圖標的下載和使用為例，其余的字體圖標生成網站大同小異。字體圖標有著輕量級，靈活性好，兼容性強等優點。當然也有自身的缺點，比如字體圖標的版權和付費問題。有些瀏覽器并不支持彩色圖標。用好字體圖標，對前端設計工作大有幫助，所以前端設計者應該熟練掌握字體圖標技術。

參考文獻：

[1]楊再興.圖標字體在網頁制作中的應用[J].電腦編程技巧與維護，2015（5）：85-87.

[2]阿里圖標庫.演示案例說明文檔[DB/OL].2019.

[3]David Sawyer McFarland.CSS實戰手冊[M].北京：中國電力出版社出版社，2017：129-155.