SVG圖標對比圖標字體的5大優點

技術頻道 - html技術

作者:admin 時間:2022-11-28 23:24:15 瀏覽:

在網頁設計中，如果你需要一些欄目小圖標，那么你可以使用圖標字體，如之前介紹過的，FontAwesome，也可以使用SVG圖標。本文將對比一下SVG圖標和圖標字體，SVG圖標特有的5大優點。

在對比之前，我們先了解一下圖標字體和SVG圖標。

FontAwesome圖標字體

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

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

Font Awesome圖標

SVG圖標

有關SVG圖標的介紹，可以看看如下文章。

逾千個SVG常用矢量圖標，隨手可得。

下面說說SVG圖標對比圖標字體的5大優點。

一、SVG圖標是矢量

矢量圖標有很大的優勢：在不損失質量的情況下可以上下調整大小，在視網膜顯示器上格外清晰，文件體積小。

圖標字體	SVG圖標
瀏覽器認為它是文本，所以圖標是抗鋸齒的?？赡軐е聢D標不如您預期的那么清晰。	直線向上矢量

在最近的一個個人示例中，當將一些圖標從字體改成用 SVG 替換時，一些字體圖標明顯不如SVG圖標清晰。

二、SVG可能是多色圖標

內聯 SVG 的最大優勢可能是多色圖標。

下表是兩者的CSS控制。

圖標字體	SVG圖標
可以通過 CSS 控制大小、顏色、陰影、旋轉等。	擁有與字體相同的 CSS 控制，但更好，因為可以 1) 控制多部分圖標的各個部分，以及 2) 使用 SVG 特定的 CSS，如筆劃屬性。

三、定位

圖標字體	SVG圖標
定位字體圖標比較困難，圖標是通過偽元素插入的，它取決于line-height, vertical-align, letter-spacing, word-spacing, 字體字形的設計方式（它周圍自然有空間嗎？它有字距調整信息嗎？）。然后偽元素display類型會影響這些屬性是否有效。	SVG 就是它的大小。

四、圖標字體可能會加載失敗

圖標字體	SVG圖標
圖標字體可能會失敗，因為 1) 它在沒有正確的 CORS 標頭的情況下跨域加載，而 Firefox 不喜歡這樣。 2) 由于某些原因，字體文件無法加載（網絡打嗝、服務器故障等）。 3) 有一些奇怪的 Chrome 錯誤，它會轉儲 @font-face 并顯示后備字體。 4)有的瀏覽器不支持 @font-face。	內聯 SVG 就在文檔中。如果瀏覽器支持它，它會顯示它。

五、SVG使用更方便

圖標字體	SVG圖標
創建自己的圖標字體從來都不是一件容易的事，所有大家都是使用第三方創建的圖標字體。而使用預先創建的圖標字體從來都不是特別負責（太多未使用的圖標）。另外，使用圖標字體需要配置Web服務器支持某種映射腳本，并且使用第三方字體需要安裝一堆相關的文件，這對于技術菜鳥來說是一件困難的事。	使用SVG圖標更容易，因為如果需要，你可以手動完成所有工作?；蛘呤褂媚承┕ぞ邔С鋈魏涡问降腟VG，如此文介紹的。

圖標字體

SVG圖標

創建自己的圖標字體從來都不是一件容易的事，所有大家都是使用第三方創建的圖標字體。而使用預先創建的圖標字體從來都不是特別負責（太多未使用的圖標）。

另外，使用圖標字體需要配置Web服務器支持某種映射腳本，并且使用第三方字體需要安裝一堆相關的文件，這對于技術菜鳥來說是一件困難的事。

使用SVG圖標更容易，因為如果需要，你可以手動完成所有工作?；蛘呤褂媚承┕ぞ邔С鋈魏涡问降腟VG，如此文介紹的。

總結

本文介紹了SVG圖標對比圖標字體的5大優點，當然，并不是說一定要使用SVG而拋棄圖標字體，每人應根據項目需要或習慣來選擇合適的方式。

相關文章