網(wǎng)頁上矢量的的icon是怎么做到的？
時(shí)間：2023-12-28 16:36:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-12-28 16:36:01 來源：網(wǎng)站運(yùn)營
網(wǎng)頁上矢量的的icon是怎么做到的？：
icon fonts利用字體工具把我們平時(shí) Web 上用的圖形圖標(biāo)（icons）轉(zhuǎn)換成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到網(wǎng)頁里，用以顯示 icons。因?yàn)樽煮w是矢量化圖形，它天生具有「分辨率無關(guān)」的特性，在任何分辨率和PPI下面，都可以做到完美縮放，不會(huì)像傳統(tǒng)位圖， 如：png，jpeg，放大后有鋸齒或模糊現(xiàn)象。
除了「分辨率無關(guān)」這個(gè)最大的優(yōu)點(diǎn)之外，icon fonts 還具有：
- 文件小：相比圖片幾十幾百KB的容量，icon fonts 幾乎是羽翼級(jí)輕量。
- 加載性能好：因?yàn)閳D標(biāo)都被打包進(jìn)一套字體內(nèi)，http request 減少。這如同我們常用的 css sprites 技術(shù)。
- 支持CSS樣式：和普通字體一樣，你可以利用CSS來定義大小、顏色、陰影、hover狀態(tài)、透明度、漸變等等…
- 兼容性好：web fonts 起源很早，別說主流瀏覽器，連IE6/7都能良好支持。除了一些老的移動(dòng)端瀏覽器，如Android 2.1以下的初代瀏覽器，Opera mini 這類自限型瀏覽器。
當(dāng)然 icon fonts 也有它的不足：
- 樣式單一，無法針對(duì)不同分辨率來調(diào)整icon 的細(xì)節(jié)，比如降低大尺寸icon 的線條粗細(xì)。
- 顏色單一，CSS 無法方便的去定義彩色的 icon，倒是有通過疊加組合的方式來達(dá)到彩色圖標(biāo)的目的。
- 移動(dòng)端瀏覽器兼容性還不夠完善，像Opera mini、Windows phone 7.0-7.8 都不能正常顯示icon fonts。
- 有少量的移動(dòng)設(shè)備有可能會(huì)和 icon fonts 的字符編碼沖突，導(dǎo)致icon 顯示不正常（我們自己風(fēng)車Android 版本就碰到了這個(gè)問題）。
所以 icon fonts 也并不是一套完美的響應(yīng)式圖片的解決方案，當(dāng)它適宜你的應(yīng)用場景時(shí)，比如：
- 你的網(wǎng)站是扁平化或簡約風(fēng)格，圖標(biāo)樣式單一，顏色為純色。
- 你的目標(biāo)用戶使用桌面瀏覽器為主，或者，
- 你愿意為非兼容設(shè)備做兼容hack。
那么 icon fonts 是一個(gè)令設(shè)計(jì)師和前端工程師都心花怒放的方案。
說白了就是把圖標(biāo)變成了字體。
以上是很久以前看到的博文，因?yàn)樽约阂埠芨信d趣所以摘抄一份，希望對(duì)你有所幫助。
至于i標(biāo)簽怎么使用，如何引入，就要根據(jù)具體框架去關(guān)聯(lián)相關(guān)的庫了。
這個(gè)是最基本的庫，里面有對(duì)應(yīng)的代碼應(yīng)用，可以了解一下~
在線咨詢