如何制作图标字体｜总结

前言：根据我的调查随着电脑和手机屏幕分辨率越来越高，icon导出的切图也越来越大，为了适应不同的屏幕分辨率，甚至要切除多套组图，但无论导出PNG还是JPG，都会遇到不能无限放大，并且前端代码对图片的渲染会有一点时间，而且有时APP内置图片安装包太大，Web进行加载时，在网络不好的情况下，对用户的体验会很不好，所以我们可以使用更灵活的图标交接形式：图标字体，你可能现在还不知道图标字体是什么，还有图标字体是如何制作的，那么请别慌，只要看完我总结的这一篇小文章你就知道了。

首先在文章的开头我先为大家介绍一下当下设计输出图标资源主要会涉及那些格式：

PDF/SVG：矢量格式有PDF和SVG，在使用PDF时也可做到矢量，无限放大与缩小并不会影响图像的清晰度，但PDF是根据不同设备的分辨率，去自动生成对应的资源，以此来达到矢量的目的，所以PDF实际上会增大我们应用的体积与资源的消耗。SVG对应的就是我们今天要介绍的图标字体。

PNG/JPG：PNG与JPG格式大家都很熟悉了，即传统意义上的切片，每次切完之后，还需压缩一遍切片大小，甚至需要修改切片的命名，例如与开发同步命名规则，不是设计师改，就是开发改命名，相对比较麻烦。例如Android，现在全面屏等高清屏的分辨率都很高，以往一些旧的资源使用@2x的切图，在高分辨率的屏幕上会出现模糊的情况，我们需要再去替换掉模糊的切片，费时费力。

GIF/APNG/WebP：GIF也是大家都很熟悉的动图格式，GIF的一大缺点是显示质量不高，仅支持8位色，显示的色彩效果不甚理想，图片甚至有锯齿。APNG是逐步兴起的一种动图格式，在后文会简单介绍一下。WebP也是一种正在慢慢流行起来的新图像格式，但iOS上的Safari浏览器并不能很好地支持。

介绍完这些格式，那么接下来我们再来介绍一下今天的主角：图标字体

你以为的字体只是文字？ 它也可能是一张图！

简单的说，图标字体就是把我们的图标，从图片格式转换成了字体格式，从而赋予它像字体一样的属性。

而且图标字体资源小，能够为App瘦包，方便管理，可以解决不同显示设备下图标图形清晰度的问题，不用再为不同设备适配不同尺寸的图像资源，节省了可观的工作量。同时前端也能从矢量技术中获得效率上的提升。

那么赋予它字体属性后，有什么好处呢？

1、加载快：一个图标字体比一系列的图像资源在数据尺寸上小不少，一旦图标字体加载之后，图标就会马上渲染出来，不需要载入图像资源。可以减少运算请求，还可以配合HTML5离线存储做性能优化。简单来说对性能优化甚至有小帮助。

2、灵活性比较高：字体比较灵活好控制并能全局管理，它可以被定制大小、颜色、阴影以及任何可采用的CSS样式，可在任何背景下显示。而使用位图必须得为每个不同大小与不同效果的图像输出不同的图像资源。

改变大小时比较方便：

原来：14px,20px,需要各切图一张  现在：前端将删除字段的 font-size:14px 改为 font-size:20px就ok了

改变颜色/hover状态:

原来：黑色，蓝色删除icon需要各切图一张   现在：前端将删除字段color : #333333  改为color : #0086ff    就ok了

改变透明度：

原来，透明度50%，80%需要各切图一张  现在：前端将删除字段 color：rgb(100 100 100 / 0.5)

改为 color：rgb(100 100 100 / 0.8) 就ok了

兼容性：

图标字体支持所有现代浏览器，包括低版本的IE浏览器。移动端方面，iOS和安卓也都能完善地支持。

互联网趋势：

目前UI行业偏工程化，所以我们尽量让设计和开发产生更多的联动。

一、制作前基础知识普及｜设计图标和导出SVG图标时需要注意的事项

我们可以到AI和Sketch里面或者在其他程序里将图标导出为SVG格式，在导出图标时一定要保证图标是转过轮廓化，因为SVG格式识别不到描边，在图标的规范上我们要注意：1.视觉大小要统一 2.差异性要明显 3.圆角统一 4.重心协调，像素对齐。

1）sketch里制作图标

2）导出前的6个注意事项

对于颜色上不需要有太多限制，我们只要导出黑色的，到时候设计师给开发一个色值让开发改变颜色即可。

3）在设计源文件中，图层区分好中英文命名、Grid、切片大小区域，画布区域按功能模块去区分，在一份设计源文件中把图标的相关信息整理好，然后在导出SVG。（更详细的图标标注参考这篇文章：https://zhuanlan.zhihu.com/p/266293890）

二、将导出的SVG格式的图标导入到指定的网站里

1）:https://icomoon.io/app/#/select 在这个网站点击左上方按钮（网站没有限制你也可以用阿里巴巴图标库只不过这个网站要比其他网站更加的方便。）

2）选择并导入你标注好的SVG图标

3）导入完成之后记得检查一下图标有没有出现bug（就是上面所描述的哪些注意事项只要做到位就不会出现什么bug）

4）只要没有出现bug，然后就可以选择你要转化成字体的图标，点击右下角生成字体。

5）跳转到已经生成字体的页面后，在这里会有一些图标的代码，在右下角我们可以下载图标字体，下载后它会默认是一个压缩包。

6）下载好图标字体压缩包后我们可以打开压缩包内的demo文件

7）然后在下面输入之前制定好的编码来确认图标字体真的没有出现bug和其他问题。

8）然后确认没有问题后我们就可以在生成完毕图标字体后，下载图标字体压缩包，然后把这个压缩包给开发，到时候开发直接调取压缩包中的CSS代码即可。（这样更容易后期我们进行迭代）

有些公司会把这种东西托管在云端，然后设计师只需要把图标上传到云端然后前端代码直接在云端调取即可，但是我在这里提醒一点一般公司不会把这种东西进行云端托管，基本都会放到自己公司内部的服务器上，因为一旦云端托管服务器出现问题你图标没缓存就完犊子了！

在这里我只做演示，因为在工作中的推进步骤是很麻烦的，因为你们的项目组可能之前就没用到过这种方法，所以我们在推进这个方法的过程中，一定会遇到开发不配合的情况，这时候你就应该考虑一下如何给开发有效的沟通，我们是不是可以在部门内部开会进行商讨这个事情，讨论一下你所推的这个方法的优点，尽可能的去说服你的同事和领导。

还有如果你已经在工作中推进成功了这个图标字体，一定记得将你们每次迭代的图标字体版本都标记好版本号，比如刚开始的版本是0.1第二个版本就必须是0.2，这样方便你平时进行筛选不容易混乱，还方便将来你离职时交接给下一位设计师。

我讲的可能还不够全面，请各位大神指正！

另外，我会陆续把自己总结的设计方法、心得感受写成文章，分享给大家，若感兴趣，可以关注我！