新趨勢:使用 SVG 替代 icon font

本文為譯文溃肪,原文標(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 可以解決這個問題)

SVG 和 icon font 比較

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-alignletter-spacing 浆洗, word-spacing 催束,字體字形設(shè)計(它的四周有留白嗎?它有字距信息嗎伏社?)抠刺。如果字符有相關(guān)特效塔淤,偽元素將會顯示這些特效

  • inline SVG
    SVG 的顯示尺寸就是它本身的尺寸

看看偽元素如何超出了它本身的界定框。
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 元素…這太麻煩了) 簿训。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末咱娶,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子强品,更是在濱河造成了極大的恐慌膘侮,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件的榛,死亡現(xiàn)場離奇詭異琼了,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門雕薪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來昧诱,“玉大人,你說我怎么就攤上這事所袁≌档担” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵燥爷,是天一觀的道長蜈亩。 經(jīng)常有香客問我,道長前翎,這世上最難降的妖魔是什么稚配? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮港华,結(jié)果婚禮上道川,老公的妹妹穿的比我還像新娘。我一直安慰自己苹丸,他們只是感情好愤惰,可當(dāng)我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著赘理,像睡著了一般宦言。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上商模,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天奠旺,我揣著相機與錄音,去河邊找鬼施流。 笑死响疚,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的瞪醋。 我是一名探鬼主播忿晕,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼银受!你這毒婦竟也來了践盼?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤宾巍,失蹤者是張志新(化名)和其女友劉穎咕幻,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體顶霞,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡肄程,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蓝厌。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡玄叠,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出褂始,到底是詐尸還是另有隱情诸典,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布崎苗,位于F島的核電站,受9級特大地震影響舀寓,放射性物質(zhì)發(fā)生泄漏胆数。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一互墓、第九天 我趴在偏房一處隱蔽的房頂上張望必尼。 院中可真熱鬧,春花似錦篡撵、人聲如沸判莉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽券盅。三九已至,卻和暖如春膛檀,著一層夾襖步出監(jiān)牢的瞬間锰镀,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工咖刃, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留泳炉,地道東北人樊销。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓叽躯,卻偏偏與公主長得像,于是被迫代替她去往敵國和親交掏。 傳聞我的和親對象是個殘疾皇子枫浙,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案刨肃? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,748評論 1 92
  • 譯自:Delivering Octicons with SVG 譯者:張萬程[譯]Github是如何使用SVG制作...
    微笑0619閱讀 3,094評論 0 3
  • 概述 SVG(Scalable Vector Graphics)是一種矢量圖格式。Adobe Illustrato...
    daoyidao閱讀 1,420評論 0 2
  • 一:在制作一個Web應(yīng)用或Web站點的過程中自脯,你是如何考慮他的UI之景、安全性、高性能膏潮、SEO锻狗、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,156評論 0 1
  • 第十五篇:盛婚紀(jì)·婚禮進(jìn)行時② 作為伴郎的安逸塵終于見到了穿著伴娘服的冉染轻纪,眼前一亮油额,也不管是不是秀恩愛的場合,上...
    盛夫人閱讀 338評論 0 0