優(yōu)先使用svg，請查看以下比較。
1、渲染方式不同
icon font：采用的是字體渲染，icon font在一倍屏幕下渲染效果并不好，在細(xì)節(jié)部分鋸齒還是很明顯的。
SVG：它是傳統(tǒng)圖片格式的一種，自身提供的功能集涵蓋了嵌套轉(zhuǎn)換、裁剪路徑、Alpha通道、濾鏡效果等能力，它還具備了傳統(tǒng)圖片沒有的矢量功能，在任何高清設(shè)備都很高清。在瀏覽器中使用的是圖形渲染，所以就是實實在在的路徑。
2、網(wǎng)絡(luò)加載
iconfont：icon font 可能會失效，因為：
它被跨域加載，而沒有使用正確的 CORS 頭信息（Firefox和IE9不支持對icon font字體的跨域訪問，需要在圖標(biāo)字體文件所在服務(wù)器配置Header參數(shù)“Access-Control-Allow-Origin”允許當(dāng)前域名才可以。而且，經(jīng)過驗證，必須將參數(shù)“Access-Control-Allow-Origin”配置為“”才可以，配置為“.當(dāng)前域名”并不可以，不知道啥原因）。
因為任何原因，字體文件加載失敗（網(wǎng)絡(luò)抽風(fēng)，服務(wù)器故障等）。
Chrome一些奇怪的漏洞會跳過 @font-face 規(guī)則，并使用 fallback 的字體取代它。
一些瀏覽器不支持 @font-face。在所有的原因中，字體加載失敗是最常見的（如果字體加載失敗，會出現(xiàn)下圖所示情況，這常常會讓人抓狂）。
SVG：inline SVG 是在文檔流中，只要瀏覽器支持，它就會顯示（這會讓我們對自己的代碼更自信）。
3、性能
SVG 性能 優(yōu)于 icon font
icon font主要在頁面用Unicode符號調(diào)用對應(yīng)的圖標(biāo)，這種方式不管是瀏覽器，搜索引擎和對無障礙方面的能力都沒有SVG好
文章來源地址http://www.zghlxwxcb.cn/article/181.html
文章來源：http://www.zghlxwxcb.cn/article/181.html
到此這篇關(guān)于svg與 iconfont字體圖標(biāo)對比,應(yīng)該優(yōu)先選擇哪個？的文章就介紹到這了,更多相關(guān)內(nèi)容可以在右上角搜索或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
