hi，设计师们！ 你们在设计web或APP项目时，会把切图以什么格式给到开发？

SVG ？  不同倍数的png ?

那你们是否遇到过以下几种情况？

1，页面已打开，可图标还没加载出来？

2，web页面，1920分辨率，100%时icon清晰， 调到125%后，图标变模糊了？

3，做hover时，前端跟你吐槽，说svg做hover很麻烦，希望你给字体图标？

那么问题来了：什么是字体图标？又怎么制作呢？

一，什么是字体图标？

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

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

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

1，加载快：字体图标 体积比图像小，加载会立即渲染出来。

2，灵活性：拿  图标为例 

     改变大小：

     原来：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了 

3，兼容性：网页字体支持所有浏览器，包括IE低版本。

二，那么如何制作字体图标？（sketch 为例）

1-sketch里制作图标

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

3-导出svg 格式

4-iconfont创建 项目文件夹

5-上传图标

如果你上传iconfont时，icon预览显示一个黑块 或显示不正常，那么请重新看下  2-导出前的6个注意事项

因为：闭合、合并、轮廓化、这些没做好，都会导致图标异常。

三，字体图标做好后，怎么给到开发？

1，把前端加进来，成为成员，前端便可自行下载

2，下载字体包到本地，再传给开发

3，如果是UI设计师要求用字符图标，前端却不知如何使用，咋办？

     可以查看-使用帮助，里面有介绍引用的方法。

四、设计师自己如何调用iconfont项目组里的icon呢？

1，先要安装一个插件 - kitchen

2，我的项目 > 2. 选择自己的项目 > 3. 选择icon尺寸的大小 > 4. 把图标直接拖动到画布上即可以使用

3，点击右下角-我的项目 ，可以直接跳转到iconfont我的项目

五、我有两个iconfont账号，kitchen里如何切换呢？

         （需要重新授权）

1，kitchen > 图标 > 取消授权

2，在kitchen面板里 > 授权登录iconfont  > 再登录就OK了

tips：

1，用iconfont做字体图标库，UI设计师离职时，要记得把iconfont 该项目的管理权限，和图标sketch源文件一起移交给下一位设计师，否则，以后就维护不了咯！

2，拓宽一下：在微信输入框中，输入“开心”，你会发现啥？ 是不是在让你选择的词汇中出现了😄的身影？

     那么，其实😄也是字体图标哦~ 

 . . . END

好啦，今天的分享就到这啦！ 

婷婷不才，如哪里讲的不对，请各位大神指正！

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

                                                              嘿！别忘点赞哦~