傳統(tǒng)圖片
- 加載一次圖片就要增加一次HTTP請(qǐng)求
- 不適應(yīng)多屏
雪碧圖
- 減少了HTTP請(qǐng)求
- 加大了CSS 編碼和維護(hù)難度
字體圖標(biāo)
- 放大不失真
- 可定制
- 本質(zhì)是字體 可以設(shè)置 大小 顏色 和 陰影
- 多色支持不足
字體圖標(biāo)三種引用方式
- unicode(最原始、兼容性最好Ie6+、不支持多色。)
- font-class(unicode方式的變種,書寫更直觀,主要是解決unicode書寫不直觀,語(yǔ)意不明確的問題、兼容性良好Ie8+,不支持多色。)
- symbol(兼容性較差,支持 ie9+及現(xiàn)代瀏覽器、支持多色圖標(biāo))