对于前端的小伙伴来说，字体应该是再熟悉不过的东西了，对于文字我们可以通过css指定文字对应的字体，字号大小，颜色。得益于css3，我们还可以在css中引入服务端字体来实现自定义字体。
而字体图标，顾名思义则是把图标当做字体来使用，通过使用字体图标，我们可以动态改变图标的大小、颜色等一系列字体属性。而且相对于一般的图片，字体图标的大小改变并不会使图像变的模糊。
接触过bootstrap的同学应该了解过，bootstrap里面就预设了很多自定义图标，我们只要在元素上指定对应的class，就可以显示出图标，接下来，我们就来一步步了解这些操作是怎么实现的。
事实上，字体图标其实就是自定义字体，在计算机系统中每个字符都有一个对应的unicode编码，而每一个字符在操作系统中就是一个矢量图形，例如“敏”这个字，对应的Unicode编码就是敏，而字体文件的作用，就是用来规定这些编码对应什么样的图形。unicode字符集里面，E000 至 F8FF属于用户自定义区域。用户可以在字体文件里面定义这些字符的对应的形状，通过项目引入加载去找到自定义字符。而字体图标的实现原理就是在这个自定义区域中添加一系列的图标，我们通过指定对应的Unicode编码来显示图片。
在css3之前，前端只能使用系统的自带字体，得益于css3，我们现在可以使用自定义字体，这使得我们能通过字体文件来实现字体图标，以下是一个使用的例子
上面的代码我们通过引入字体文件，指定对应的Unicode编码，渲染出一个图标，效果如截图所示
-
伸手党
阿里图标库iconfront，里面提供了很多免费的图标，可以直接选择图标下载对应的字体文字
-
手工制作
1、准备矢量图形
我们知道字体的实质是一个矢量文件，所以如果我们需要制作一套自定义的字体图标，首先我们需要一个矢量文件，也就是一个svg，svg实际上是一个xml文件，复杂一点的可以用AI( Adobe Illustrator)制作。当然，熟悉语法亦可以手工编写，例如我们手工编写一个绿色的正方形图标代码如下
效果如下所示
当然，如果你手头上只有UI提供的png图标，那也没关系，可以通过在线转换工具，将png转化为svg文件，传送门在此，在线转换的话仅支持比较简单的图标，为了后续方便对颜色的控制，建议仅使用单色的图标进行转换。当然，如果你熟悉AI( Adobe Illustrator)也可以通过它直接将png转化为svg
2、制作字体文件
现在我们有了矢量图标了，我们需要把它制做成字体文件，这里使用另一个在线转换工具，可以通过上传的svg文件生成字体图标
使用亦比较简单，左上角上传png图标，点击右下角就可以下载对应的字体文件，同时也支持批量生成，读者可以自行摸索。
生成后的文件结构如下所示：
fonts是对应的字体文件，style.css是自动生成的样式文件，可以直接套用，也可以修改后使用。selection.json则是当前所使用的所有图标的一个索引，下次如果要合并新图标到字体文件中，可以把这个selection.json上传到上面的工具网站，生成一个集合，再往集合里面添加新的图标，再次生成字体文件即可
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/bcyy/37610.html