Web中的图标

Posted wss88

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web中的图标相关的知识,希望对你有一定的参考价值。

随着时代的变迁和技术的不断更新,Web中的图标(icons)不再仅仅是局限于<img>。除了<img>直接调用icons之外,还有Sprites(俗称雪碧图)、Icon Font(字体图标)、SVG Icon等等。

前端工程师关心页面可访问姓、性能以及重构的灵活性,可重复性,可维护性等等。

原始的<img>

优势

更换简单方便,只需要修改图标路径或覆盖图标文件名

图标大小易于掌控

劣势

增加HTTP请求,如果页面使用的图标过多,直接拉高了HTTP的请求数,也就直接影响了页面的加载性能。

不易适配各种终端和分辨率,特别是高PPI的显示设备,有可能造成图标模糊

不易修改图标的样式,比如颜色,阴影等

不易维护

Sprites图标(雪碧图)

 

以上是关于Web中的图标的主要内容,如果未能解决你的问题,请参考以下文章

使用故事书中的反应原生矢量图标反应原生 Web 问题

SDK 升级后 Flutter Web 中的图标错误

如何在 Sharepoint 2010 Web 部件页中正确更新站点图标

Flutter Web 图标在 Apache 实时服务器上出现错误 404

web桌面,但使图标透明

Flutter web,图标呈现错误的图标