卡卡網(wǎng)

在網(wǎng)頁(yè)設(shè)計(jì)中，如果你需要一些欄目小圖標(biāo)，那么你可以使用圖標(biāo)字體，如之前介紹過的，FontAwesome，也可以使用SVG圖標(biāo)。本文將對(duì)比一下SVG圖標(biāo)和圖標(biāo)字體，SVG圖標(biāo)特有的5大優(yōu)點(diǎn)。

在對(duì)比之前，我們先了解一下圖標(biāo)字體和SVG圖標(biāo)。

FontAwesome圖標(biāo)字體

Font Awesome是最常用的圖標(biāo)字體，有關(guān)FontAwesome字體的介紹及使用，可看看我寫的幾篇文章。

• Font Awesome content代碼匯總，共246個(gè)
• Font Awesome圖標(biāo)在IE瀏覽器不顯示的解決方法
• IIS7.5安裝配置Font Awesome圖標(biāo)字體的方法
• IIS6.0安裝配置FontAwesome圖標(biāo)字體運(yùn)行環(huán)境

Font Awesome有哪些圖標(biāo)？Font Awesome包含300多種常見小圖標(biāo)，如小箭頭之類的icon，如下圖所示（只截取部分）。

Font Awesome圖標(biāo)

SVG圖標(biāo)

有關(guān)SVG圖標(biāo)的介紹，可以看看如下文章。

• 逾千個(gè)SVG/PNG常用矢量圖標(biāo)(含HTML代碼)免費(fèi)下載

逾千個(gè)SVG常用矢量圖標(biāo)，隨手可得。

下面說說SVG圖標(biāo)對(duì)比圖標(biāo)字體的5大優(yōu)點(diǎn)。

一、SVG圖標(biāo)是矢量

矢量圖標(biāo)有很大的優(yōu)勢(shì)：在不損失質(zhì)量的情況下可以上下調(diào)整大小，在視網(wǎng)膜顯示器上格外清晰，文件體積小。

在最近的一個(gè)個(gè)人示例中，當(dāng)將一些圖標(biāo)從字體改成用 SVG 替換時(shí)，一些字體圖標(biāo)明顯不如SVG圖標(biāo)清晰。

二、SVG可能是多色圖標(biāo)

內(nèi)聯(lián) SVG 的最大優(yōu)勢(shì)可能是多色圖標(biāo)。

下表是兩者的CSS控制。

三、定位

四、圖標(biāo)字體可能會(huì)加載失敗

五、SVG使用更方便

參考文章：逾千個(gè)SVG/PNG常用矢量圖標(biāo)(含HTML代碼)免費(fèi)下載

總結(jié)

本文介紹了SVG圖標(biāo)對(duì)比圖標(biāo)字體的5大優(yōu)點(diǎn)，當(dāng)然，并不是說一定要使用SVG而拋棄圖標(biāo)字體，每人應(yīng)根據(jù)項(xiàng)目需要或習(xí)慣來選擇合適的方式。

相關(guān)文章

• SVG圖標(biāo)：icon-home【代碼】
• 逾千個(gè)SVG/PNG常用矢量圖標(biāo)(含HTML代碼)免費(fèi)下載
• 簡(jiǎn)化svg文件中的對(duì)象可減小文件大小，6mb減到700kb
• 使用Inkscape優(yōu)化SVG，文件從1600kb減到16kb
• 減小SVG體積的5個(gè)技巧，網(wǎng)頁(yè)加載時(shí)間從10秒降到2秒
• 詳細(xì)介紹CSS+SVG創(chuàng)建圓圈/圓環(huán)動(dòng)畫
• [實(shí)例]純 CSS SVG 畫圓/圓環(huán)/圓弧動(dòng)畫
• 比較和了解何時(shí)使用SVG與何時(shí)使用Canvas

• 圖片SVG、PNG、JPEG、GIF有什么不同？
• SVG 與 Canvas 的 6 大區(qū)別比較表
• SVG 與 Canvas 的五大區(qū)別
• SVG圖片對(duì)比PNG、JPEG的5大優(yōu)點(diǎn)
• svg circle stroke屬性設(shè)置實(shí)線邊框/虛線邊框/無邊框
• CSS+SVG：畫圓并且文字寫在圓中間
• CSS+SVG實(shí)現(xiàn)環(huán)形/圓環(huán)文字效果【簡(jiǎn)單實(shí)例】
• 純CSS實(shí)現(xiàn)環(huán)形文字效果
• 用表格(Table)數(shù)據(jù)創(chuàng)建SVG圖表【簡(jiǎn)單實(shí)用】

標(biāo)簽: SVG  圖標(biāo)字體  SVG圖標(biāo)