img/background/iconfont---誰最適合你？

tinyq 發布于2019-08-01 15:23 / 752人閱讀

摘要：在所有的網站優化話題中，資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現的，并使用進行合并。可以減少請求，還可以配合離線存儲做性能優化。創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。

前言

第一篇文章，小弟先做一番自我介紹^ω^
姓名不說，年齡21歲，湖北武漢一所二本大學2016屆本科畢業生，大四前的暑假起對web前端產生興趣并有半年實習經驗。ng、vue、react等等高大上的框架完全不懂，卻也靠前端交流群和百度積攢下了一些小小心得。說來寫文章也是比較心虛，怕有理解不到位之處還可能禍害別人。可是萬一哪位大牛看到之后閑來無事在評論里指點一波，我不就賺大了么^ω^希望各位能抱著辯證的觀點看看我的文章，有什么錯誤之處還請不吝賜教。^ω^

比較

在這里將三者放在一起比較其實比較勉強，根據圖像類型來區分，img/background和iconfont是一對參照物，根據圖像使用方式來區分，img和background是一對參照物。那么我們一個一個看吧。

1.img與background使用區別

http://blog.sina.com.cn/s/blog_6722ab160101bnn7.html

上面的鏈接內容是一位前輩對于img和background的見解。很好很強大，我是怎么也想不到seo這里去的，根據前輩所述，按照瀏覽器解析機制，html標簽優先解析，像官網的logo這種需要非常醒目的標志性圖片，選擇img會更合適。使用img的另外一個好處就是圖片提示。就像我們在瀏覽愛奇藝網站的時候，有時視頻下的文字由于太長而被省略，我們將鼠標移動到圖片上時會有一個小的氣泡彈出，里面顯示該視頻的標題全部內容。這樣有利于輔助閱讀。

而使用background屬性來加載圖片有一個非常好用的技巧就是雪碧圖(css sprite)。在所有的網站優化話題中，資源文件的壓縮都是占很大比重的。如果能將若干張小圖片合并成一張大圖片，那么只需要一次http請求就能取到我們所需要的資源，可以提高頁面載入速度。像百度圖片中的友情鏈接所使用的圖片就是作為backgeound-image呈現的，并使用css sprite進行合并。并且相對來講，background更加支持自適應布局，css3中提供了background-size的屬性，可以將圖片拉伸、縮放至需要的大小。

總結一下：當需要優先加載、需要提供詳細信息的時候，我們選擇img更合適；而一些小圖標比如用戶頭像、等數量繁多且體積小的圖片，則適合用background來加載。一般來說，如果是裝飾性的圖片就使用background-img，如果和文體內容很相關就使用img。
下面一則鏈接同樣是一位前輩總結的兩者使用環境的區分，各位且看且斟酌。

http://my.oschina.net/u/1162572/blog/137403

2.iconfont的使用環境

iconfont中文名為圖標字體，顧名思義是一類字體，以約定好的代碼來代表對應相對應樣式，能夠做到不使用圖片而呈現圖片的效果，總結有以下優點：

輕量性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標字體加載了，圖標就會馬上渲染出來，不需要下載一個圖像。可以減少HTTP請求，還可以配合HTML5離線存儲做性能優化。

靈活性：圖標字體可以用過font-size屬性設置其任何大小，還可以加各種文字效果，包括顏色、Hover狀態、透明度、陰影和翻轉等效果。可以在任何背景下顯示。使用位圖的話，必須得為每個不同大小和不同效果的圖像輸出一個不同文件。

兼容性：網頁字體支持所有現代瀏覽器，包括IE低版本。我們在caniuse.com可以查到其對于主流瀏覽器的兼容性。

只要支持網頁字體就能使用圖標字體。

除了以上優勢之外，當然也有劣勢：

圖標字體只能被渲染成單色或者CSS3的漸變色，由于此限制使得它不能廣泛使用。

使用版權上有限制，有好多字體是收費的。當然也有很多免費開源的精美字體圖標供下載使用。

創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。

圖標字體使用方法這里就不多敘述了，有興趣的各位可以在下面鏈接看看。

http://www.tuicool.com/articles/B32uYj

淘寶對于圖標字體是非常支持的，以至于淘寶自己開發了一套iconfont庫。如果需要展示純色圖片，使用iconfont會是不錯的選擇，前面也提到了圖標字體具有輕量的特性，并且可以自定義顏色、大小，可以使用控制字體的屬性對圖標字體進行控制。對于移動端來講，iconfont的使用更加廣泛。許多頁面上的icon如點贊、評論、收藏等純色圖標都會使用iconfont，非常方便。

結語

綜上所述，我總結了一個列表：

img	background	iconfont
網站logo	輪播圖片	小型純色圖標
產品/視頻/新聞列表欄目	合并圖片(css sprites)
需要優先加載的圖片

希望本文對大家搭建頁面時有所幫助。

GPU云服務器云服務器網站你你不會認識你帶給你

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/49885.html

img/background/iconfont---誰最適合你？

摘要：在所有的網站優化話題中，資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現的，并使用進行合并。可以減少請求，還可以配合離線存儲做性能優化。創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。前言第一篇文章，小弟先做一番自我介紹^ω^姓名不說，年齡21歲，湖北武漢一所二本大學2016屆本科畢業生，大四前的暑假起對web前端產生興趣并有半年實習經驗。ng...

icyfire 2019-08-29 10:55 評論0 收藏0
2017前端框架誰最火？微信指數告訴你

摘要：前端發展很快，各種框架推陳出新，很多小伙伴面臨最大的問題就是，我該選哪個框架學習呢從本質上來說，每個框架各有長處，沒有絕對的好壞，各自有適合的項目場景，唯一家獨大的框架吹固然是不可取的選擇的時候，先明確要做的是什么項目，如果是管理后臺，選寫前端發展很快，各種框架推陳出新，很多小伙伴面臨最大的問題就是，我該選哪個框架學習呢？從本質上來說，每個框架各有長處，沒有絕對的好壞，各自有適合...

jone5679 2019-08-20 15:21 評論0 收藏0
Stack Overflow：幫助一百萬開發者退出 Vim

摘要：簡評注意，這不是演習，要退出編輯器真的很難。這意味著在工作日的高峰時段，每小時約有人需要被幫助退出。結論你永遠不知道你貢獻的答案可以幫助數以百萬計的人，無論是分享如何撤消提交，或者中的關鍵字如何工作。簡評：注意，這不是演習，要退出 Vim 編輯器真的很難。早上，一個流行的 Stack Overflow 問題成為一個重大里程碑： showImg(https://segmentfaul...

Hujiawei 2019-06-28 10:23 評論0 收藏0
深入理解PHP之isset和array_key_exists對比

摘要：從這個函數最后一行可以看出，最終執行的還是根據不同的用法會使用不同的處理此處以為例。如下總結效率高于之后有左右的提升有將近的提升。 1、概述經常使用isset判斷變量或數組中的鍵是否存在, 但是數組中可以使用array_key_exists這個函數, 那么這兩個誰最優呢? 官方文檔對兩者的定義 - 分類描述文檔 isset 語言構造器檢測變量是否已設置并且非 NULL...

Jenny_Tong 2019-07-01 10:47 評論0 收藏0
首次公開，整理12年積累的博客收藏夾，零距離展示《收藏夾吃灰》系列博客

摘要：時間永遠都過得那么快，一晃從年注冊，到現在已經過去了年那些被我藏在收藏夾吃灰的文章，已經太多了，是時候把他們整理一下了。那是因為收藏夾太亂，橡皮擦給設置私密了，不收拾不好看呀。 ...

Harriet666 2021-09-10 10:51 評論0 收藏0