icon图标发展历程总结
2022-11-16 18:20:11 0 举报AI智能生成
icon图标发展历程总结
作者其他创作
大纲/内容
远古时代
一个icon 图标一张图
近代
CSS Sprite （雪碧图）
利用css 的background-position使用不同的图标<br>
优点
1、减少并发下载的需求
缺点
1、维护困难<br>
Data URL (base64)
优点
1、减少并发下载的需求
缺点
1、大量图标塞到 css 甚至 html 中，就会增大它们的体积，<br>拖慢了整体渲染速度导致首屏展现变慢<br>
现代
字体图标
优点
1、字体图标本身就是字体<br>2、受到字号、前景色、行高等参数的控制<br>3、和普通文字混排
缺点
单色
当代
SVG
缺点
1、svg 也是图片，也有雪碧图和 Data URL 的优缺点<br>2、颜色不会自动跟随文字颜色<br>3、二是图标的大小不会自动跟随字体大小
解决办法
1、利用currentColor，预定义的特殊颜色值，<br>它的意思就是取当前的文字颜色）弥补相对于字体图标的缺点（单色），支持彩色图标<br>2、使用em尺寸单位，图标大小设置为1em就会让图标的实际尺寸跟当前字号一致
优化
1、Tree Shaking 实际未被使用的图标应该自动被优化掉，并且从源码中删掉
2、单页面应用（SPA）并不需要同时下载大量的图标，而是按需加载
3、使用 svgo 对svg 图标体积优化
合字（Ligature）
定义
“囍”，它不是一个字，而是一个“合字”，两个汉字，只是显示成了一个字的样子。<br>Google 最早使用合字图标，<iclass="material-icons">home</i>就可以显示出一座房子。<br>
原理
material-icons 类为这个 i元素指定了一个支持合字的字体库：'Material Icons'，<br>然后就会在字体库中检索出 home 这个合字对应的单字，并且把那个单字显示出来就可以了。<br>换句话说，home 是某个单字的别名。
应用
无障碍阅读（给这个图标加上特殊的 aria-label等属性，以便屏幕阅读器朗读它们）
总结
图标技术，各有优缺点，适用于不同的场景，<br>根据需求和技术条件选型，可以混合使用，以发挥各自的优势<br>
0 条评论
下一页
