本文為譯文溃肪,原文標(biāo)題:inline SVG VS icon font,鏈接:via 痹栖。
如果你正在為網(wǎng)站構(gòu)建圖標(biāo)系統(tǒng),你會有很多選擇瞭空。如果你的 icon 需要使用位圖揪阿,那么可能會選擇 CSS Sprite 疗我。如果使用矢量圖標(biāo)(近期更普遍使用的方案),你也會有一些選擇南捂,其中的兩種方案是使用 inline SVG 或 icon font 吴裤。
針對二者的特點,我們來做一下比較溺健。
(譯者茁笪:本文只比較以 inline 方式寫入文檔流的 SVG 方案,不討論以 CSS background 寫入背景圖的方案鞭缭。)
圖標(biāo)是矢量的
矢量圖標(biāo)有很大的優(yōu)勢:可調(diào)整大小而不失品質(zhì)剖膳,在視網(wǎng)膜屏幕上也可以清晰顯示,文件尺寸也非常小岭辣。
icon font:
瀏覽器認(rèn)為這是文本吱晒,所以會對其使用抗鋸齒。這可能導(dǎo)致圖標(biāo)不如你想象的那么銳利沦童。inline SVG:
真正的矢量
舉一個我個人最近的例子仑濒,在 CodePen 項目中,一些 icon font 明顯比那些 SVG 要模糊偷遗。(譯者注:其實通過固定字號的 henting 可以解決這個問題)
CSS 控制
icon font
您可以通過 CSS 控制圖標(biāo)大卸胀( 使用font-size
), 顏色鹦肿,陰影矗烛,旋轉(zhuǎn)等。inline SVG
和 icon font 一樣箩溃,你可以使用同樣的控制器瞭吃。更贊的是,你可以 1)控制圖標(biāo)的各個部分 2)使用 CSS 控制 SVG 特有的屬性涣旨,如描邊屬性歪架。
這個回合里,SVG 的最大亮點是霹陡,這種格式的圖標(biāo)可以是彩色的和蚪。
定位
icon font:
定位 icon font 可能是一個令人沮喪的過程。這些圖標(biāo)是通過偽元素插入的烹棉,它依賴于line-height
攒霹,vertical-align
,letter-spacing
浆洗,word-spacing
催束,字體字形設(shè)計(它的四周有留白嗎?它有字距信息嗎伏社?)抠刺。如果字符有相關(guān)特效塔淤,偽元素將會顯示這些特效inline SVG
SVG 的顯示尺寸就是它本身的尺寸
詭異的問題
icon font
icon font 可能會失效高蜂,因為:1. 它被跨域加載,而沒有使用正確的 CORS 頭信息罕容,F(xiàn)irefox不喜歡這樣备恤。 2. 因為任何原因,字體文件加載失斏庇(網(wǎng)絡(luò)抽風(fēng)烘跺,服務(wù)器故障等)。3. 一些奇怪的 Chrome 漏洞會跳過 @font-face 規(guī)則脂崔,并使用 fallback 的字體取代它滤淳。4. 一些神奇的瀏覽器不支持 @font-face。
在所有的原因中砌左,字體加載失敗是最常見的脖咐。inline SVG
inline SVG 是在文檔流中,如果瀏覽器支持汇歹,它就會顯示屁擅。
語義
icon font
如果是正確地使用,你會 通過空的偽元素<span>
顯示你的圖標(biāo)产弹。這樣是否合適或者符合語意的派歌,取決于你如何看待這類寫法。inline SVG
圖標(biāo)是小的圖像痰哨。<svg>
的語意是說“我是個圖片胶果。”——這看起來似乎好些斤斧。
無障礙(針對殘障人士)
icon font
使用 icon font 必須要非常小心早抠,以確保做到無障礙訪問∏朔恚基本上蕊连,你需要做到這篇文章 里所描述的。你必須一直很小心游昼,以確保該圖標(biāo)本身不可朗讀(但別的文本部分可讀)(譯者注:瀏覽器會認(rèn)為 icon font 是「文本」從而朗讀甘苍,而視覺障礙人士并不需要這些無意義的「文本」)。inline SVG
我不是專家烘豌,但研究表明羊赵,使用元素的適當(dāng)?shù)慕M合和屬性,如<title>
、<desc>
和aria-labelledby
可以很好地透過瀏覽器傳達(dá)信息昧捷。并且,沒有奇怪的故障狀態(tài)罐寨。
易用
icon font
使用預(yù)創(chuàng)建的 icon-font 實際上是不專業(yè)不負(fù)責(zé)的(因為有太多閑置圖標(biāo)白白占用空間)靡挥,而自己創(chuàng)建 icon font 從來不是一件容易的事。我認(rèn)為最好的工具是PICTOS Server (僅限于PICTOS 自家的圖標(biāo))鸯绿,以及 IcoMoon(免費登錄以保存項目)跋破。Fontello 有一個API,可惜沒有看到基于它制作的好工具瓶蝴。inline SVG
inline SVG 更容易毒返,因為如果需要你可以完全手動制作∠鲜郑或者使用類似IcoMoon工具(無論哪種輸出方式)拧簸。或者使用這個 構(gòu)建工具 男窟。
瀏覽器兼容性
icon font
很廣泛盆赤。即使是 IE 6。inline SVG
還不錯歉眷,問題出在 IE 8 和 Android 2.3-牺六。可以使用 fallback 規(guī)則汗捡,但不完美淑际。
贏家
這一切都取決于瀏覽器支持。如果你的項目只兼容到 IE9+/安卓3+扇住,inline SVG幾乎在所有方面都比 icon font 要好春缕。如果您需要更廣泛的瀏覽器兼容性,我覺得 inline SVG 方案會帶來很多麻煩台囱,所以不建議嘗試(比如文件需要一個 PNG 副本淡溯,需要插入額外的元素以顯示降級后的 PNG 版本,隱藏對應(yīng) SVG 元素…這太麻煩了) 簿训。