大厂设计师不愿说的秘密-图标字体化的落地

APP的设计必然离不开图标，图标是任何设计系统或产品体验的重要组成部分。图标可以帮助我们快速导航。它与我们的语言无关。最重要的是：它们体积非常小，所以它们不占用过多的空间尺寸，图标可以很好的达到表意的效果，减少字体表意带来的位置的占用，达到增加美感和减少认知偏差的作用。

目前APP内图标的实现方式为设计师通过切图上传Png的透明图标，研发下载后再放置在相应的位置。实现出来，这种方法的好处为便捷开发和设计，但是不足之处也是很多的，

1. 图标是以图片的形式存在着，无法做到变色，在同一位置的同一图标如需变色时，必须切好变色前的颜色以及变色后的颜色。

2.设计师流动性较大，之前设计师设立的规范在实际落地过程中难以贯彻到新的设计师手中，图标的粗细，大小、颜色、间距均难以做到统一导致整个项目会存在大量的相似图片。

APP发展到一定阶段，必然会会面临包体积越来越大，无用的icon（图标）与相似的icon越来越多的问题，同时由于开展新的业务需要不断的涌现新的场景，不可避免的会增加大量的icon素材，总结来看，需要解决的也就是如何通过一个icon规范来做到适应多个场景以及多种颜色。

首先需要使用sketch的插件icon font，本质来看就是把图标转化成字体，以字体文件的形式安装，安装后，图标就以字体的形式输出至软件里，可编辑，可以转换成形状。

2.1安装插件

在sketch插件库内搜索icon font，具体的网址如下https://www.sketch.com/extensions/plugins/。下载插件Use Icon fonts in Sketch

下载不到的我也贴心的准备了下载好的，可以私信我领取呀。

下载好后解压会得到4个文件，安装iconfent.sketchplugin这个文件，安装好后在sketch插件部分就可以看见该插件，打开后会有3个选项。

你会发现这个插件还不能使用，既然是管理icon font的插件，第一件是就是先安装一部分的iconfont才能进行管理，此时需要安装带有图标的字体，通常为两种方法，一种是较为复杂的使用专业的字体编辑软件fontforge，绘制图标字体包，（我们常见的字体也是通过这种软件进行绘制的）但该方法较为麻烦需要重新学习新的软件，所以我们果断使用第二种方法

插件的作者为了方便使用，已经提供了一个字体包，里面包括了很多热门的字体包安装之后就可以使用了。https://github.com/keremciu/font-bundles，

此时解压之后依然是4个文件，此时需要安装字体在tff-files内有预制的5个图标字体库安装

此时你的电脑内就有了图标字体的包，但是sketch插件依然无法读取，点击安装字体包，将整个解压后的文件安装此时插件安装完毕，就有了基本的预设字体，此时图标就为字体了。

在通过转曲可以将字体转化为图标的形式

2.2自制图标如何转为字体包

将自己绘制的icon导出为SVG格式（注意要将所有的线条转化为轮廓在导出），否则后面识别的是闭合的路径，字体就会出错

使用这个网站https://fontello.com/将导出的svg图标制作成为字体格式ttf（SVG的图标命名与字体命名均要为英文否则识别不出来）

此时可以看到没有闭合的路径均会自动闭合形成一个黑块，而转为轮廓的和面性图标则不受影响

2.3如何删除字体包

2.4如何导出Bundle

点击 Plugins -> Icon Font -> Install / Remove -> Export your Font Bundle，在弹出的对话框中，选择要导出 Font Bundle 的目录位置，点击 Open。

选择要导出 Font Bundle 的目录位置

然后，将导出的 Font Bundle 文件夹，分享给需要的小伙伴就可以了，使用方法和上面提到安装 Plugin 作者提供的 Font Bundle 是一样的。

注意导出的 Font Bundle，是不包含字体文件的，记得从字体册中，将字体文件拷贝出来。否则安装了 Font Bundle，也是无法使用的。

优势：轻量一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

以上就是如何将图标字体落地的方法。