<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <h5>前言</h5> 讯享网
之前想要分析FontAwesome字体图标集，想要了解如何从零实现字体图标，由于种种原因中间搁置了，最近空闲突然想起了就趁此机会实践下实现打造图标库。
具体实现
本文主要分为三个部分，分别如下：
- 使用AI将PNG装换成SVG
- 使用iconMoon将SVG转换成字体图标
- 使用@font-face应用字体图标到实践中
PNG TO SVG
查找相关资料使用AI将PNG转换成SVG，但是发现有一定的限制，限制如下：
- PNG是位图，SVG是矢量图，如果尺寸很小，使用AI导出为SVG再转换成字体图标存在问题，一片空白
- 查找相关的资料，别人建议PNG的尺寸至少为300*300，背景透明
选择220*220的PNG图片，AI中具体的处理流程如下：
- 在AI中打开PNG图片
- 全选图片，选择顶部区域的窗口—图像临摹
- 打开视图—显示透明度网格
- 全选图片区域，选择对象—扩展
- 切换到直接选择工具，按delete快捷键去除白色背景，之后导出为svg即可
SVG TO 字体图标
使用iconMoon网站（iconMoon）上传你的SVG文件
就使用上面装换的svg文件，操作如下：
最上面的就是刚才转换的SVG文件，之所以建议300*300的PNG图片，就是因为小于这个尺寸的PNG装换为SVG会很小
选择你需要转换的图标设置一些信息和参数，点击Generate Font就会生成字体图标：
fonts就是需要的字体文件，style.css就是需要在项目中使用的字体图标的css代码了
注意：
图标最好是单色的，上面的图标在iconMoon上显示不是单色，生成的字体图标的格式会有问题，所以就把颜色都变为黑色了
使用@font-face应用字体图标
使用上面生成的图标，效果如下：
代码如下：
总结
今天从零开始去打造字体图标以及如何使用，平时项目中使用的iconfont或者font-awesome都是类似，但是它们细节处理地更好，如果你感兴趣可以深入研究。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/194890.html