网页上矢量的的icon是怎么做到的？
时间：2023-12-28 16:36:01 | 来源：网站运营
时间：2023-12-28 16:36:01 来源：网站运营
网页上矢量的的icon是怎么做到的？：
icon fonts利用字体工具把我们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。因为字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图， 如：png，jpeg，放大后有锯齿或模糊现象。
除了「分辨率无关」这个最大的优点之外，icon fonts 还具有：
- 文件小：相比图片几十几百KB的容量，icon fonts 几乎是羽翼级轻量。
- 加载性能好：因为图标都被打包进一套字体内，http request 减少。这如同我们常用的 css sprites 技术。
- 支持CSS样式：和普通字体一样，你可以利用CSS来定义大小、颜色、阴影、hover状态、透明度、渐变等等…
- 兼容性好：web fonts 起源很早，别说主流浏览器，连IE6/7都能良好支持。除了一些老的移动端浏览器，如Android 2.1以下的初代浏览器，Opera mini 这类自限型浏览器。
当然 icon fonts 也有它的不足：
- 样式单一，无法针对不同分辨率来调整icon 的细节，比如降低大尺寸icon 的线条粗细。
- 颜色单一，CSS 无法方便的去定义彩色的 icon，倒是有通过叠加组合的方式来达到彩色图标的目的。
- 移动端浏览器兼容性还不够完善，像Opera mini、Windows phone 7.0-7.8 都不能正常显示icon fonts。
- 有少量的移动设备有可能会和 icon fonts 的字符编码冲突，导致icon 显示不正常（我们自己风车Android 版本就碰到了这个问题）。
所以 icon fonts 也并不是一套完美的响应式图片的解决方案，当它适宜你的应用场景时，比如：
- 你的网站是扁平化或简约风格，图标样式单一，颜色为纯色。
- 你的目标用户使用桌面浏览器为主，或者，
- 你愿意为非兼容设备做兼容hack。
那么 icon fonts 是一个令设计师和前端工程师都心花怒放的方案。
说白了就是把图标变成了字体。
以上是很久以前看到的博文，因为自己也很感兴趣所以摘抄一份，希望对你有所帮助。
至于i标签怎么使用，如何引入，就要根据具体框架去关联相关的库了。
这个是最基本的库，里面有对应的代码应用，可以了解一下~
在线咨询
