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