趙文艷

摘 要：圖標(biāo)在前端設(shè)計中應(yīng)用廣泛，主要的圖標(biāo)技術(shù)有雪碧圖（sprite），純CSS3圖標(biāo)和字體圖標(biāo)三種，這三種方案各有優(yōu)劣。文章主要闡述了字體圖標(biāo)技術(shù)特點(diǎn)，重點(diǎn)說明了如何應(yīng)用該技術(shù)。

關(guān)鍵詞：字體圖標(biāo);前端設(shè)計

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

1 生成字體圖標(biāo)

1.1 字體文件類型

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

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

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

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

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

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

1.2 生成字體圖標(biāo)的網(wǎng)站

使用字體圖標(biāo)首先要生成字體圖標(biāo)，在網(wǎng)絡(luò)上有很多提供免費(fèi)字體的網(wǎng)站。這里介紹兩個比較熱門的字體圖標(biāo)生成網(wǎng)站。

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

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

1.3 字體圖標(biāo)的生成

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

2 字體圖標(biāo)的應(yīng)用

2.1 普通字體圖標(biāo)的使用

將解壓好的阿里圖標(biāo)文件拷貝到項目目錄的預(yù)設(shè)文件夾內(nèi)，在項目中引入iconfont.css文件，或?qū)confont.css文件里的內(nèi)容復(fù)制粘貼到項目的css內(nèi)容里。

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

2.2 彩色圖標(biāo)的使用

Iconfont提供了Symbol 圖標(biāo)引用方式，該用法的實(shí)質(zhì)是做了一個 SVG 的集合。優(yōu)點(diǎn)是可以顯示彩色圖標(biāo)，缺點(diǎn)是兼容性差，瀏覽器渲染的性能一般。

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

加入CSS樣式，設(shè)定圖標(biāo)的寬高：

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

挑選相應(yīng)圖標(biāo)并獲取類名，例如類名為icon-fanqie，應(yīng)用于頁面：

3 結(jié)語

以阿里巴巴字體圖標(biāo)的下載和使用為例，其余的字體圖標(biāo)生成網(wǎng)站大同小異。字體圖標(biāo)有著輕量級，靈活性好，兼容性強(qiáng)等優(yōu)點(diǎn)。當(dāng)然也有自身的缺點(diǎn)，比如字體圖標(biāo)的版權(quán)和付費(fèi)問題。有些瀏覽器并不支持彩色圖標(biāo)。用好字體圖標(biāo)，對前端設(shè)計工作大有幫助，所以前端設(shè)計者應(yīng)該熟練掌握字體圖標(biāo)技術(shù)。

參考文獻(xiàn)：

[1]楊再興.圖標(biāo)字體在網(wǎng)頁制作中的應(yīng)用[J].電腦編程技巧與維護(hù)，2015（5）：85-87.

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

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