web页面使用字体图标

刚学web开发的时候，网页上的图标都是用标签引入一张小图片来实现的，这样的好处是简单、易上手。但是渐渐地，开始注重页面细节和用户体验，就会发现这种方式存在一些弊端：

随着页面放大，图片会出现锯齿和马赛克，不能一直保持清晰；

要保证图片放大到一定程度后还清晰，就得使用分辨率更大的图片，则会造成更多流量消耗或因渲染不及时而出现的闪动问题；

为了改变颜色不得不更换整张图片，就得提供不同颜色的版本（很多人会选择雪碧图解决该问题，但还是加大了文件尺寸）

下面是一张64*64的图片放大后的效果：

普通图片

再来看看本文即将介绍的字体图标放大后的效果：

字体图标

作为矢量图形，无论放大多少倍，字体图标都能保证清晰、无锯齿。是不是发现它就和文字一样可以随意调整大小，任意设置颜色，甚至可以通过font-weight: bold;实现加粗效果？没错！它此时就是字体。可以这么理解，并不是只有汉字、字母、数字等常见的字符才是“字”，归根结底，它们就是一个个形状（特别是从汉字是象形文字的角度来理解），那图标也完全是一个形状啊，汉字的“口”无非就是一个稍微处理过的“正方形图标”、汉字“品”就是经过排列的“三个正方形图标”，以及你现在看到的这篇文章中的所有字符……只是一些字体在这些简单图形的基础上加了笔锋（衬线字体）而已。

现在，开始动手制作字体图标吧！

一、准备制作字体图标的原材料：svg图标

首先从阿里图库（一个提供海量精致图标的网站，极力推荐）选择喜欢的图标加入购物车。

温馨提示：针对某个web项目选择好所有图标后，建议在购物车弹窗中点击“添加至项目”，然后新建一个项目（与你的web项目同名，便于和其他项目区分开），这样做的好处是今后万一需要补充新的图标（非常有可能），就不需要重新搜索、下载原来的旧图标了。加入项目后，可以点击任意图标上的“编辑”按钮修改图标的尺寸和名称。更多原因我会在后面详细说明，请先继续阅读。

阿里图库

编辑图标

在购物车弹窗中点击“下载代码”后，解压

购物车 下载代码

svg图标 文件结构

此时我们只有svg文件，下面开始制作字体文件：

二、制作字体图标

进入IcoMoon官网，点击右上角按钮“IcoMoon App”

进入app

新页面中点击左上角按钮“Import Icons”，选择第1步解压后的iconfont.svg文件，之后的弹框中选择“NO”，svg上传成功（图中第二个红色箭头指向的黄色按钮是默认的，意为“选中”，旁边的删除按钮选中后可以删除不需要转化的图标）

导入图标

接下来选中我们导入的这些svg图标（不需要一个个点击，试一下点击第一个图标滑动到最右边的图标）确认全部选中后，点击右下角按钮“Generate Font”

选中图标

这一步可以继续修改图标名称（建议在阿里图库选择图标期间就修改名称，一劳永逸）

提醒：名为“message”的图标，之后在html文件中以的形式引用（IcoMoon会为每个图标加“icon-”前缀）所以不需要另外加前缀了。名称确认无误后点击右下角按钮“Download”，解压

下载图标

字体图标 文件结构

三、引入项目

将fonts（整个文件夹）、style.css两个文件粘贴至web项目中，注意检查style.css中引用fonts下四个字体文件的路径是否有误，html页面使用引入样式文件，代码结构参考：

代码结构

下面来看一组对比（GIF图帧率有限，所以第二行的字体图标显得有毛边，实际效果很清晰）：

普通图片/字体图标的放大缩放对比

普通图片/字体图标的修改颜色对比

查看演示请狠狠地点击：图片与字体图标对比demo

四、尺寸对比

对于普通图片，我下载了两种规格，64*64和200*200，数量都是47张，它们的尺寸大小分别为147.7KB、442KB

普通图片文件大小

而字体图标整体大小才96KB！！！并且可以随意放大

字体图标文件大小

五、字体图标的缺点

由于icomoon下的四个文件是打包过的字体文件，所以一旦要添加新的图标，就得重新下载iconfont.svg和icomoon字体，不能在原来的基础上新增，哪怕只需新增一个。所以前文建议大家在阿里图库选择图标时就注意保存进项目里，而且要做好图标重命名，这样下载新的svg文件才会更方便，另外在制作之前应该考虑哪些图标是要频繁更换的、哪些是永久性的，针对不同类型选择不同方案；

字体图标和字体一样，都是单通道的，所以不能设置多种色彩，即只能一种颜色，如果对某些图标有多色需求，可以选择图片，二者应兼顾使用，取长补短。

编辑不易、截图录制更不易，看完本文有收获请点个赞吧～