導航

立即咨詢:400-090-1128添加微信
News
常見問題
自适應網站圖标應如何使用?
作者:時間:2019/11/8 9:13:42閱讀:

自适應網站能夠随着屏幕不同尺寸響應,變換網頁上内容塊布局、改變文字、圖片、圖标的大小,給訪問者帶來良好的浏覽體驗。今天這篇文章小編就先讨論一下網頁圖标如何處理可以達到自如縮放的效果。

針對自适應網站技術,有兩類圖标技術可以采用:一是字體圖标,二是SVG圖标。

字體圖标就是像字體一樣可以随意放大縮小的圖标,并可像字體一樣改變顔色。現将它的特性總結如下:

使用CSS進行編輯,包括圖标的大小、顔色、陰影等CSS能做到的一切都可在字體圖标上實現,具體來描述下:
很容易縮放;
改變顔色;
産生陰影;
擁有透明效果;
先進的浏覽器支持;
快速轉化形态,比如鼠标移到圖标上的變化效果等;
可做出與圖片類似狀态,例如改變透明度、旋轉度等;
可兼容性:字體圖标基于Web Font實現,能夠兼容多種網頁字體;
可訪問性:這是屬于用戶可用性的一項。盡管國内對此重視不夠,但不久企業将意識到這是一個需要注意的地方;
字體圖标體積更小,使得網頁打開速度更快。

随着浏覽器性能不斷優化,SVG圖标的應用又被重新提及。因為浏覽器認為字體圖标是文本,所以會對其使用抗鋸齒。這可能導緻圖标邊緣不那麼銳利,而SVG圖标看起來更清晰。

什麼是SVG?SVG是一種可伸縮的圖形格式,其放大和縮小圖片顯示質量都不會改變,這種圖片格式也稱為矢量圖。但與其他矢量圖不同,SVG的圖片文件非常小。

對了,由于SVG圖片體積很小,它不僅僅可用作圖标,還可以用于網頁上的其他圖形設計。



立即咨詢我們吧
全年免費維護,終身技術支持!
13812009346 QQ 在線留言