作者&＃xff1a;前端日志

转发链接&＃xff1a;https://mp.weixin.qq.com/s/c-Us1Nm_8BqRD2Vc0l9emA

前言

图标是网站中非常友好的附加物&＃xff0c;许多网站都会使用各种图标来美化页面样式&＃xff0c;给用户提供更好的指引。本文将会和大家一起学习页面图标的发展历史&＃xff0c;以及最优的解决方案。

• 传统图标
• 字体图标
• SVG 图标

传统图标

编写图标最简单的方式就是使用一张图片&＃xff0c;如&＃xff1a;

      图标   

在我刚开始写页面的时候就是这样做的&＃xff0c;感觉 so easy&＃xff0c;直到业务变得越来越复杂&＃xff0c;我就不得不思考以下几个问题&＃xff1a;

• 图标需要适配多个客户端
• 图标太多需要优化
• 图标需要动态修改颜色

对于适配多个客户端的问题&＃xff0c;设计师们通常都会给我们提供多个尺寸的设计图(&＃64;1x 图、&＃64;2x 图)&＃xff0c;于是我们就可以根据不同的客户端来选择对应尺寸的图片。

通常使用方式是&＃xff1a;媒体类型 或 配置 srcset。

例如&＃xff1a;

                        

通过上面的方法&＃xff0c;多客户端适配问题解决了&＃xff0c;但我们使用了多张内容相同、尺寸不同的图标&＃xff0c;这无疑增加了图片的数量。

随着图片的增多&＃xff0c;图片管理就是一个问题。每一张图片都会发起一个 HTTP 请求&＃xff0c;而浏览器并行加载同一域名下的请求是有限制的&＃xff0c;太多的图片无法全部并行加载&＃xff0c;就会进行排队加载&＃xff0c;排在后面的图片也就不能及时得到渲染。

通常&＃xff0c;解决大量图片 HTTP 请求&＃xff0c;有两种方式&＃xff1a;

• 雪碧图
• Base64 图

雪碧图指的是&＃xff0c;将所有小图片合并成一张大图片。在浏览器渲染时&＃xff0c;这张大图片只需要发起一次 HTTP 请求&＃xff0c;然后就被浏览器缓存起来了&＃xff0c;当再次使用该图片时&＃xff0c;就会直接从缓存中进行读取&＃xff0c;从而避免了发起多次 HTTP 请求。

首先&＃xff0c;我们需要将许多小图片合成一张大图&＃xff1a;

然后在 CSS 中进行定位。

.icon1,.icon2,.icon3 {  width: 54px;  height: 54px;  background: url("../大图.png");}/* 定位背景图&＃xff0c;让图片显示到对应的位置 */.icon1 {  background-position: -168px 0px;}.icon2 {  background-position: -56px 0px;}.icon3 {  background-position: 0px 0px;}

可以看到&＃xff0c;使用雪碧图布局时&＃xff0c;所有的图片都使用了同一张大图&＃xff0c;然后使用背景图去定位&＃xff0c;以区分不同的小图标。

总结一下雪碧图的特点&＃xff1a;

• 只需发起一次 HTTP 请求。
• 只能通过 CSS 背景图渲染。
• 如果只用到了大图中的一张小图&＃xff0c;也必须加载整张大图&＃xff0c;有点浪费资源。
• 不利于维护&＃xff0c;每次新增图标时&＃xff0c;都不能影响到之前已经排好的图标&＃xff0c;所以生成工具需要更智能。

接下来&＃xff0c;我们看一下 Base64 图&＃xff1a;

Base64 图指的是&＃xff0c;将一张图片数据编码成一串字符串&＃xff0c;并使用该字符串代替图像地址。

可以看到&＃xff0c;图片的 src 并不是一个地址&＃xff0c;而是一个字符串&＃xff0c;这样甚至可以不发起 HTTP 请求&＃xff0c;就能渲染图片。

Base64 的原理是 Data URLs&＃xff0c;即&＃xff1a;前缀为 data: 协议的 URL&＃xff0c;允许开发者向 HTML 中嵌入小文件。

总结一下 Base64 图的特点&＃xff1a;

• 无 HTTP 请求。
• 图片内容由字符串表示&＃xff0c;通常会很长&＃xff0c;这必定会增加 HTML 的大小。
• Base64 并不是 url&＃xff0c;所以不能进行缓存。
• 适用于极小的图片&＃xff0c;如&＃xff1a;1x1 的小图&＃xff0c;用作背景图&＃xff0c;重复渲染平铺整个页面。

Ok&＃xff0c;我们来总结一下传统图片画图标的几种方式&＃xff1a;

最后剩下动态修改图片颜色的问题&＃xff0c;这个就比较难控制了&＃xff0c;可以用 CSS Filter 去做滤镜&＃xff0c;通过调整图片的模糊度、对比度、灰度、透明度等&＃xff0c;间接地改变图片颜色。

例如&＃xff1a;

img {  // 让图片变灰  filter: grayscale(100%);  // 让图片变模糊  filter: blur(5px);  // ...}

但是 CSS Filter 能修改的颜色是有限的&＃xff0c;如果想任意修改图标颜色&＃xff0c;我们继续往下看。

字体图标

随着互联网的不断发展&＃xff0c;字体图标逐渐来到了我们的视野&＃xff0c;它可以像处理文字一样去处理图标&＃xff0c;大大地提高了图标的灵活性。使用字体图标可以非常轻松地修改图标颜色。

字体图标的使用方式

字体图标使用方式特别方便&＃xff0c;我们只需要在页面中引入对应的字体文件&＃xff0c;然后编写对应的字符就可以了。

字体图标有两种写法&＃xff1a;

• 直接编写 Unicode 编码。
• 使用伪类去写 Unicode 编码。

例如&＃xff1a;

                  直接使用字符编码&＃xff1a;     使用类名渲染(将字符写在了伪类中)&＃xff1a;  

可以看到&＃xff0c;我们可以像处理文字一样去修改字体图标的颜色。

字体图标的原理

字体图标的本质是一种字符&＃xff0c;而字符又是字体渲染出来的&＃xff0c;字体决定了我们在键盘上敲打的字符最终在页面上长什么样。

这就好比书法家写字&＃xff0c;不同的字体就是不同的书法家&＃xff0c;不同的书法家虽然都在写同一个字&＃xff0c;但是由于字迹的不同&＃xff0c;写出来的文字也就大不相同。

试想一下&＃xff1a;有一个特立独行的书法家&＃xff0c;他并不按照常规的写法来写字&＃xff0c;他写出来的字都是一个个的小图标&＃xff0c;那不就是字体图标了吗

其实&＃xff0c;书法家写字这个道理&＃xff0c;在网页中也是一样的。

页面在渲染文字的时候&＃xff0c;会先将文字转换为对应的 unicode 编码&＃xff0c;然后根据 css 中配置的 &＃64;font-face url 找到对应的字体文件(eot ttf woff 等)&＃xff0c;接下来在该字体文件中找到这个 unicode 编码对应的绘制外形&＃xff0c;最后绘制在页面上。

我们看到的内容 &＃61; fontFamily(unicode);

深入字符编码

在计算机中&＃xff0c;我们能看到的所有字符&＃xff0c;底层都是用二进制来表示的&＃xff0c;如&＃xff1a;空格符在二进制中就是 00100000&＃xff0c;大写的字母 A 在二进制中就是 01000001。

为了方便维护字符和二进制的关系&＃xff0c;前辈们将这些对应关系记录成一张表。

ID字符二进制32空格符0010000065A01000001

这个表就是我们常说的字符编码&＃xff0c;上表即 ASCII 编码的一部分。

最初的 ASCII 编码只能表示 128 个符号&＃xff0c;主要存储的是 26 个英文字母的大小写和数字等。有了 ASCII 编码后&＃xff0c;我们就能编写对应的字体去渲染表中的字符了&＃xff0c;但其他没有被记录的符号也就无法显示了&＃xff0c;如&＃xff1a;不同国家的汉字、emoji 符号等。

为了解决中文字符编码问题&＃xff0c;国家制定了 GB2312 编码&＃xff0c;该编码收录了 6763 个汉字&＃xff0c;涵盖了中国大陆 99.75% 的使用频率&＃xff0c;能满足绝大多数的汉字需求。

但 GB2312 编码只适用于中文&＃xff0c;而世界上还有 200 多个国家&＃xff0c;他们也有自己独特的文字&＃xff0c;难道每一个国家都需要自制一套字符编码吗&＃xff1f;

其实不用&＃xff0c;在 1991 年 10 月&＃xff0c;诞生了 unicode 编码&＃xff0c;它制定了一套统一的编码标准&＃xff0c;收纳了世界上所有国家的文字符号&＃xff0c;到目前为止&＃xff0c;已经有 100 多万个符号。

unicode 最多 4 个字节&＃xff0c;一个字节 8 个比特位(表示二进制中的 0 或 1)&＃xff0c;也就是 2**32 个状态&＃xff0c;完全可以容纳世界上所有的符号。

所以&＃xff0c;任何一个符号&＃xff0c;都可以在 unicode 编码中被找到。

总结一下字体图标的特点&＃xff1a;

• 字体图标是矢量图&＃xff0c;即使放大也不会变模糊。
• 字体图标可以通过 CSS 样式进行控制&＃xff0c;使用更加灵活。
• 字体文件一般比较大&＃xff0c;但可以将不用的字体删掉。

最后&＃xff0c;字体图标虽好&＃xff0c;但它的本质仍然一种文字&＃xff0c;所以 CSS 在设置 color 时只能选一种颜色&＃xff0c;如果我们想制作一个多色的小图标&＃xff0c;也就无能为力了。

SVG 图标

SVG 诞生于 1999 年&＃xff0c;目的是用来绘制矢量图形&＃xff0c;它主要通过定义必要的线和形状来创建一个图形。

SVG 图标使用方式

SVG 采用 XML 格式的语法来画图&＃xff0c;例如&＃xff1a;

                                                      

可以看到&＃xff0c;首先我们把需要使用的图标封装到 symbol 标签中&＃xff0c;在使用时只需要 use 一下就可以了。这给我们定义一个 CSS class 然后再去 HTML 中引用是一个道理。

通常的 SVG 图标库会把所有用到的图标封装到一个 JS 文件中&＃xff0c;我们只需要引入这个 JS 文件&＃xff0c;然后就能直接 use 对应的图标了。

我们再看一个多色图标的例子&＃xff1a;

                            icon-coffee                                                              使用                

可以看到&＃xff0c;SVG 和 HTML 一样具有树形结构&＃xff0c;结构中的 path 都是图形中的一个区域&＃xff0c;这些区域可以被 CSS 选择器匹配到。当我们匹配到对应的区域时&＃xff0c;就能进行对应的颜色修改了&＃xff0c;一张多色的 SVG 图也就做好了。

总结一下 SVG 图标的特点&＃xff1a;

• 支持动态修改多个区域的颜色
• 支持渐变色
• 矢量图&＃xff0c;放大也不会变模糊

思考与总结

本文介绍了 3 种小图标的使用方式&＃xff0c;这里做一个简单回顾。

• 传统图标&＃xff0c;简单粗暴&＃xff0c;切好图就能用&＃xff0c;但需考虑不同尺寸以兼容不同设备&＃xff0c;图片的颜色不好更改。
• 字体图标&＃xff0c;需要引入字体文件&＃xff0c;然后编写特定的字符&＃xff0c;可以很方便的修改颜色&＃xff0c;但只能是单色。
• SVG 图标&＃xff0c;需要引入预先定义好图标的 SVG 文件&＃xff0c;然后将具体的图标 use 出来即可&＃xff0c;可以分别修改图标中不同部位的颜色。

总体来说&＃xff0c;3 种图标使用起来都很简单&＃xff0c;而 SVG 图标则是一个大趋势&＃xff0c;我们可以视具体情况来做选择。

作者&＃xff1a;前端日志

转发链接&＃xff1a;https://mp.weixin.qq.com/s/c-Us1Nm_8BqRD2Vc0l9emA