刚开始学习网页开发的时候，网页上的图标是通过引入一张带有标签的小图片来实现的。这样做的好处是简单易用。但渐渐地，当你开始关注页面细节和用户体验时，你会发现这种方式存在一些弊端：随着页面的放大，图片会出现锯齿和马赛克，无法始终保持清晰；保证图片放大到一定程度后依然清晰，如果不得不使用分辨率更高的图片，会造成流量消耗较大或者渲染不及时导致的闪烁问题；为了改变颜色，你必须更换整个图片，你必须提供不同的颜色版本（很多人会选择雪碧图像来解决这个问题，但文件大小仍然增加）以下是放大效果一张64*64的图片：先来看看本文要介绍的字体图标的放大效果：作为矢量图，无论放大多少倍，都可以保证字体图标的清晰度和清晰度。参差不齐。有没有发现它可以随意调整大小，颜色可以任意设置，就像文字一样，甚至可以使用font-weight:bold;达到大胆的效果？这是正确的！这是此时的字体。可以这样理解，不仅仅是汉字、字母、数字等常见字符是“字”。归根结底是形（尤其是从汉字是象形文字的角度），图标也完全是形。啊，汉字“口”无非是一个稍微加工过的“方形图标”，汉字“品”是排列的“三个方形图标”，而你现在在这篇文章中看到的所有字符......只是一些字体向这些简单的形状添加笔划（衬线字体）。现在，让我们开始制作字体图标吧！1、准备制作字体图标的原材料：svgicons首先在阿里图库（提供大量精美图标的网站，强烈推荐）中选择自己喜欢的图标，加入购物车。温馨提示：选中某个web项目的所有图标后，建议在购物车弹窗中点击“添加到项目”，然后新建一个项目（与你的web项目同名，这很容易与其他项目区分开来），这样做的好处是，如果您以后需要添加新图标（很有可能），则无需再次搜索和下载原来的旧图标。加入项目后，您可以点击任意图标上的“编辑”按钮，修改图标的大小和名称。稍后我会解释更多原因，请先阅读。在购物车弹窗中点击“下载代码”后，我们只有解压后的svg文件。让我们开始制作字体文件：2.制作字体图标。点击“导入图标”按钮，选择第一步解压的iconfont.svg文件，然后在弹出框中选择“否”，svg上传成功（图中第二个红色箭头所指的黄色按钮）该图是默认的，意思是“选择”，旁边的删除按钮可以删除不需要转换的图标）接下来，选择我们导入的svg图标（不用一一点击，试试点击第一个图标滑动到最右边的图标）确认全部选择最后点击右下角的“生成字体”按钮继续修改图标名称（建议在选择图标的时候修改名称阿里图库，一劳永逸）温馨提示：图标名为“message”，然后在html文件中加上（IcoMoon会在每个图标前加上“icon-”），所以不需要额外的前缀。名称确定后，点击右下角的“下载”按钮进行解压。3、导入项目将fonts（整个文件夹）和style.css这两个文件粘贴到web项目中，查看style.css中引用的fonts下的四个字体文件路径是否错误？HTML页面使用导入样式文件。代码结构参考：来看一组对比（GIF图片的帧率有限，所以第二行的字体图标显得边缘粗糙，但实际效果很清晰）：查看demo，请用力点击：图片和字体图标对比demo4.尺寸对比对于普通图片，我下载了两种规格，64*64和200*200，数量为47张，大小分别为147.7KB和442KB，整体尺寸字体图标只有96KB！！！并且可以随意放大5.字体图标的缺点由于icomoon下的四个文件都是打包好的字体文件，一旦要添加新的图标，就得重新下载iconfont。增加，即使你只需要加一个。因此，上一篇文章建议大家在阿里图库中选择图标时，注意保存到项目中，并重命名图标，这样下载新的svg文件会更方便。此外，在制作图标之前，您应该考虑哪些图标需要经常更改。哪些是永久性的，不同的类型选择不同的方案；字体图标和字体一样，都是单通道的，所以不能设置多种颜色，也就是只能设置一种颜色，如果有些图标需要多种颜色，可以在选择图片的时候，两者要同时使用，并互相学习。剪辑不易，截屏更难。看完这篇文章，点个赞吧~
