如何制作Iconfont（Photoshop+Illustrat

SVG的制作流程：

①图标（JPG、PNG、GIF等）已存在：

用Adobe Photoshop打开图片，先将图片转换为黑白两色的位图（自行百度）<阈值的选取可根据图片的锯齿大小来定>，然后将导出的位图用Adobe Illustrator打开，依次进行：

①选中对象<对象仅包含有色与透明两种属性>

②菜单栏对象——图像临摹

③菜单栏对象——实时上色<对有色部分上色就好了>

④菜单栏对象——拼合透明度

⑤菜单栏对象——取消编组

⑥导出SVG文件

②图标还在路上未生成图片：

①直接打开Adobe Illustrator进行绘制SVG，一定记得绘制的对象只有有色与透明两种属性

②设法生成图片，对设计稿进行拍照得到相应的照片，再用Adobe Photoshop打开照片，在新的图层上仅绘制（所谓的绘制说的图形，有线条有填充）有色部分就好了，绘制好之后将其保存为SVG导出

如果得到的SVG不满足Iconfont的制作条件或者与理想有偏差，可以采取的措施有：

轮廓化描边：

对文字：文字——创建轮廓（让文字区域透明是请结合路径选择器来处理）

对画布：只是针对有无padding这个来考虑的，有padding的最好是正方形的画布，图标最大时最好也不要贴边，无padding的最好是画布边缘不出现透明区域，也就是图标的上下左右均触及画布边缘

对其他：打开Adobe Illustrator的路径选择器，先进行有色与透明的整合，各个操作可以试一遍再决定应当采用何种或者几种操作来整合有色与透明

Iconfont不满足预期条件时均需要依次进行的操作是：

①菜单栏对象——取消编组

②对象——扩展

③对象——扩展外观

④对象——路径——轮廓化描边

也可以使用FontCreator来进行局部轻微（能力有限）的处理，具体的操作自己摸索吧，软件还是需要都动手才能掌握的，需要注意的一个关键点是在添加一个新的Iconfont之后需要对其属性中的Name和Codeprints这两项进行必要编辑，这样的才能在保证每一个Iconfont的唯一性（引用的时候，标签元素的CSS选择器是按照class来进行分类的）和位置顺序性（一般添加在末尾，这样方便Codeprints的取值，注意其前面需要添加一个$才能保证取值的有效性），但是想要保证文件的完整和复用性，最好在HTML、CSS和JS文件中进行相应的添加操作，HTML和CSS的操作相对较为简单，一般只需要进行复制替换来进行添加即可，JS的操作较为复杂，暂时没有一个非常好的方案，由于SVG的性能会受到图形渲染的影响，在图形处理不好的机子上将会得到不良的体验，一般不建议在网页中进行引用，还有就是对Iconfont进行软件（FontCreator）处理时JS文件的操作可以忽略，但是HTML和CSS文件的操作是非常必要的。

需要借助的网站：

①https://icomoon.io/app/#/select

主要用来验证SVG是否满足制作Iconfont的条件，验证如果不满足条件还会提出相应的解决方案来供参考，不满足条件时上传的SVG或是不显示完全或是位置出现偏差等，具体应依照引用的情况来定条件的满足与否

②http://www.iconfont.cn/

先创建一个Iconfont项目（如是添加到已有项目可以忽略该步骤），再上传制作好的SVG（SVG是否合格请回看①），然后将相应的图标添加至购物车，之后再到购物车将图标添加至项目，最后只需要下载整个项目即可

项目最后的验证：

将项目从http://www.iconfont.cn/上下载下来，解压到相应的位置，用浏览器打开demo_fontclass.html，先是看外形（有可能显示不全），后是看Hover的效果（涉及引用时的padding问题），最后是改变整个网页的背景色（校验有色与透明整合的情况）