前言
之前想要分析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都是类似，但是它们细节处理地更好，如果你感兴趣可以深入研究。
到此这篇字体图标库制作（字体图标原理和实现）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/bcyy/21860.html