?解決方案:
1. Css sprite 雪碧圖,也稱為css精靈圖
2. Icon font 圖標字體
3. Data URI scheme
實現原理:
雪碧圖: ? 它的基本原理是將網站中的所有的圖標圖片整合到一張圖片中,該圖片使用css 中的width,height,background屬性和background-position屬性來渲染網站中請求頁面中的圖標。
Icon font: ?它的基本原理自定義一種字體,將不同的字配置作為icon圖案,然后通過css嵌入其中使用。
?DataURI scheme: ? ?Data URI scheme是在RFC2397中定義的,將一些小的數據,直接嵌入到網頁中,從而不用再從外部文件載入
優勢&劣勢
雪碧圖
優勢
1. 加快網頁加載速度
2. 能減少圖片的字節數
3. 解決了前端工程師的命名問題
4. 便于后期維護,更換方便
5. 可以避免鼠標滑過的一些bug(IE6)
劣勢
1. 占據內存(大量無用的空白)
2. 雪碧圖拼圖制作麻煩,
3. 影響瀏覽器的縮放功能
4. 雪碧圖調用的圖片不能被打印,除非在@media中特殊說明
5. 為了減少 HTTP 請求數(這是使用 CSS Sprite 一直強調的好處),然而把所有的圖片都當背景圖片來處理,尤其是那些傳達重要信息的圖片,將會導致一個網站缺乏可訪問性的問題,也會降低 HTML 中 title 和 alt 潛在的好處。其實,CSS sprite 本身并不會出錯,也不會引發可訪問性問題(事實上,正確得使用會提高可訪問性)。
不適合使用雪碧圖的場景
1. 網絡環境比較差
2. 移動頁面夜間模式下
?ICON font
優勢
1. 很好的解決了響應式設計中圖形無損自適應的問題,可以通過font-size和color屬性來控制icon的大小和顏色
2. 體積小,可以無限拉伸
?劣勢
1. 樣式單一、顏色單一
2. 有少量的移動設備可能會和icon fonts的字符編碼沖突,導致icon顯示不正常
3. 跨域問題
4. 文字圖片的大小設置
5. 10p以下的字體chrome瀏覽器顯示12px
Data URI scheme
優勢
使用一個data uri scheme
劣勢
瀏覽器使用的過程中不會緩存該圖片
?參考資料:
?Sprite
http://www.cnblogs.com/hustskyking/archive/2015/08/17/iconfont-opt.html
http://www.cnblogs.com/demix/archive/2009/11/28/1612715.html
https://segmentfault.com/q/1010000000407231
http://ntx.me/2015/05/21/IconFont/
https://think2011.net/2017/03/31/css-sprite/
Iconfont
http://www.cnblogs.com/hustskyking/archive/2015/08/17/iconfont-opt.html
http://www.cnblogs.com/demix/archive/2009/11/28/1612715.html
https://segmentfault.com/q/1010000000407231
http://ntx.me/2015/05/21/IconFont/
Data URI scheme
Data URI中,data表示取得數據的協定名稱,image/png 是數據類型名稱,base64 是數據的編碼方法,逗號后面就是這個image/png文件base64編碼后的數據。
Data URI scheme支持的類型有:
data: ,文本數據
data:text/plain,文本數據
data:text/html,HTML代碼
data:text/html;base64,base64編碼的HTML代碼
data:text/css,CSS代碼
data:text/css;base64,base64編碼的CSS代碼
data:text/javascript,Javascript代碼
data:text/javascript;base64,base64編碼的Javascript代碼
data:image/gif;base64,base64編碼的gif圖片數據
data:image/png;base64,base64編碼的png圖片數據
data:image/jpeg;base64,base64編碼的jpeg圖片數據
data:image/x-icon;base64,base64編碼的icon圖片數據
http://blog.csdn.net/c_mihoo/article/details/12774719
https://isux.tencent.com/understand-data-uri-performance.html