图标字体库制作

在做ui设计的工作中，因为程序员的要求，所以接触到字体库。这里的字体库是指把一个项目要用到的图标做成svg格式，然后借助网站生成像字体一样可以直接改变大小和颜色的文件包。（ps: svg格式是矢量图，所以显示更清晰，但存在浏览器适配问题，png图片可能会糊，占存大）

因为字体库给程序员，他们可以自己修改里面图标的大小和颜色，同时有的图标就可以跨项目利用，还不用设计师去修改颜色，设计师也不用去为了适配输出多套图标，减少设计师的工作时间；同时使用sketch的同学还可以下载自己的图标在设计稿里使用，使用方法会在文章里具体介绍。但是字体库有自己的局限，比如渐变图标或者多色图标是没有办法适用字体库的。总体而言，字体库可以节省设计师时间，让我们有更多的时间去做个人的知识积累啦，也方便了程序员的工作。但是每个人有自己的习惯，根据喜好来就好。

在制作过程中笔者踩了不少的坑，所以在这里总结一下自己的坑，方便大家规避。

一、借助平台

帮助设计师制作字体库的平台有icon moon和阿里的iconfont等。

二、制作工具

我个人制作图标工具是Ai

三、制作方法和遇到的坑

1.在ai里把自己想要的图标做好，这里以iconfont平台为例，当我把图标做完，存储为svg格式，然后登录iconfont网站，鼠标悬停在图标管理，会有我的图标下拉菜单，点击进入后点击上传图标，把自己做好的svg文件拖入(这里有第一个坑，因为我在存储svg时，勾选了画板，所有文件名后缀都有-01，后面下载的字体库都有后缀，被程序猿diss，所以大家想输出画板尺寸，就把名称后缀都删了)

图标导入iconfont-1

2.第二个坑，线条缺失。因为在制作图标时，我运用到了线条和面积，在存储svg后，导入iconfont就出现问题，因为这些制作字体库的网站只识别面，线条就没了。为了避免这个问题，在做好图标后，要选中所有线和面，然后点击对象>>扩展，扩展勾选填充就好；

上传后图标

图标原图

图标对像扩展

扩展后上传图标

3.第三个坑，填充颜色发现形状没有连接成一体。

填充颜色

原因是因为我的这两个圆角是用两个圆形拼接的。在做图标时，只要存在面结拼接的，都要在扩展之后，把要合并的面积选中，点击左侧工具栏里的形状生成器工具，对比图里左边是连接的，右边是没有连接的

形状生成器

对比图

4.第四个坑，是圆角矩形上传后变成直角矩形。我还不知道原因，目前的克服方式就是用圆形去代替本身的圆角，如果有人知道更好的方法，可以联系我，共同分享。

5.当图标上传好了，悬停会有购物车图标，就可以在网站点击购物车那个图标，然后建立自己的项目，在自己的项目里点击下载至本地。然后把文件给程序员就可以了。

四、字体库的运用

我之前使用sketch时，图标使用的网站是glyph search,这个网站的图标在skrtch里我可以改变图标大小和颜色。但是这个网站里的图标是别人的，不如用自己的图标来的合适。所以我们找到使用自己上传的图标作为字体库的方法。还可以团队共享。

第一步，进入iconfont我的项目，将想要的用的图标放进一个项目，下载至本地；

第二步，打开文件包，安装字体；

文件包安装字体

第三步，字体安装成功之后，打开demo_unicode.html这个链接，选择你要的图标进行复制，再打开sketch，直接粘贴

文件包打开unicode链接

粘贴之后，会得到一个❓文件，在字体那里找到iconfont字体，颜色和字号都可以进行修改

sketch图标显示-1

sketch图标显示-2

六、总结

首先希望大家看到这篇关于字体库的文章后能够有所帮助，然后发现我有错误的地方，联系我，diss我。毕竟一个人力量有限，希望大家一起进步。