什麼情況下更適合使用 font-icon，相比圖片 css sprites 有哪些優勢？

01-23

是不是大流量網站很少見到有用？比如知乎、豆瓣、google各種網站

AI 中畫完，保存為 SVG，上傳到 ? IcoMoon ，稍微調整下位置大小，要什麼下載什麼。

下載後的文檔結構，以及 Demo，相當方便了。

補充：新的生成流程， https://github.com/morlay/font-online

優勢：

1、矢量化，可直接被轉換為任意大小，任意顏色。

一次製作，多端使用，包括 IE （低版本 IE 可以引入 eot 的 http://caniuse.com/#feat=eot，雖然需要做些修正），滿足各種 Retina 的需求。

2、通過 font 的一致的 CSS 屬性進行控制，除了單色外，還可以 text-shadow 等，來進行簡單色彩的混搭。（當然可以完全升級為 SVG，玩成這樣，SVG Icons FTW，但放棄低版本 IE 用戶這種事，任重道遠；而且這已經不是 font 的範疇了）

劣勢：

1、對於「過於精細」的路徑，會出現失準的情況（似乎是不同系統字體渲染的問題，暫時沒有深究為什麼）。

2、色彩過於單一。

3、字體 U+ 編號，如果沒有 LESS/SASS/STYLUS 的變數幫助，用在 CSS 里並不是那麼方便，（畢竟圖標不一定是放到文本中的，還有作為背景元素之類的，:before{ content : "e020" } 這種用來手寫 CSS 有點反人類吧。

至於什麼情況下更適合使用，看自己的需求吧。

不知道淘寶、一淘算不算大流量網站……

矢量、可變色

拿 BootStrap 的 2 和 3 作對比「icon: 2 用的是 css sprite、3 用的是 font-icon」

3 的 icon 顏色可以跟隨按鈕變換，在 Retina 屏幕上更銳利

阿里系的很多站點都用了。font icon的好處很多，除了矢量化，可變色，不用考慮ie6的PNG透明等常說的好處外，還不用為sprite icon中的inline-block的兼容性煩惱。

對於兼容方面的先不說，關鍵需要看網站設計的風格，如果不是大量使用純色圖標, 使用彩色風格的還是無法使用。

我看騰訊視頻直接用SVG畫的，不知與font—icon比起來那個更好點

很明顯，兼容性，

看看中國IE9以下的瀏覽器份額就明白了