ICOMOON序言最近有移动端的项目，对图像处理非常烦恼。 偶然知道了可以把SVG图像转换成ICONFONT。 这里面的好处不大，但本笔记的主要目的是记录整个过程。
从PNG到SVG一般来说，我们从UI得到的图和自己剪的图都是PNG、JPG格式的位图。 IcoMoon只接受SVG格式的图像或JSON。
所以我们的第一步是将PNG图像转换为SVG图像。
所需的工具是Inkscape。
工具打开后，选择文件-打开你自己的图像(PNG，JPG )
路径跟踪位图的轮廓(将位图转换为矢量图) )。
删除下面的位图并保存为SVG图像
将SVG图像转换为ICONFONT登录到ICO-MOON，然后单击Import Icons将SVG图像上传到ICO-MOON。
点击小图标，选择Generate SVG More，可以修改图标，例如位置、大小等各个方面的内容。
我在这里选了中央。 网格是16。 然后，此时显示的是16px的字体大小，可以通过font-size更改图标的大小。
可以批量修改，也可以转换图像。
Generate Font生成字体，其中包含文件夹。
使用时一般将上面的fonts文件夹放入服务器中，设置css文件，导入该字体文件夹。 示例的代码如下所示。
@font-face //定义词体系font-family: 'help-icon '； //源src : URL (./fonts/help-icon.eot？ uvfg8j '； src : URL (' ./fonts/help-icon.eot？ uvfg 8j # ie fix ' (format (embedded-opentype ) )、URL ) ./fonts/help-icon.TTF？ uvfg8j ' ) format('truetype '，url('./fonts/help-icon.woff？ uvfg8j ' ) format('woff '，url('./fonts/help-icon.svg？ uvfg8j#help-icon ' )格式(SVG )； 字体权重：正规； 字体样式： normal； //类名开头为icon-或icon-的[class^='icon-']、[class*=' icon-'] /* use！ importanttopreventissueswithbrowserextensionsthatchangefonts */font-family : ' help-icon '！ 导入； 速度： none； 字体样式： normal； 字体权重：正规； 字体变量： normal； text-transform: none； 行高： 1；/* betterfontrendering===========-WebKit-font-smoothing 3360 antialiased； - moz-OS x-font-smoothing : gray scale； icon-check _ circle 3360 before content : 'e900 '； icon-keyboard _ arrow _ right : before content : 'e901 '； icon-man _ mark : before content : 'e902 '； icon-message _ circle : before content : 'e903 '； icon-phone _ circle 3360 before content : 'e904 '； icon-user : before content : 'e905 '； icon-women _ mark : before content : 'e906 '； icon-write : before content : 'e907 '； content的编码编号基于fonts文件夹中的svg文件确定，如e907。
结语不知道在说什么，感觉需要学习的东西太多了。 一起学习吧。