字体图标科普——从字体图标原理到制作

什么是字体图标

对于前端的小伙伴来说，字体应该是再熟悉不过的东西了，对于文字我们可以通过css指定文字对应的字体，字号大小，颜色。得益于css3，我们还可以在css中引入服务端字体来实现自定义字体。

而字体图标，顾名思义则是把图标当做字体来使用，通过使用字体图标，我们可以动态改变图标的大小、颜色等一系列字体属性。而且相对于一般的图片，字体图标的大小改变并不会使图像变的模糊。

接触过bootstrap的同学应该了解过，bootstrap里面就预设了很多自定义图标，我们只要在元素上指定对应的class，就可以显示出图标，接下来，我们就来一步步了解这些操作是怎么实现的。

字体图标和字体的关系

事实上，字体图标其实就是自定义字体，在计算机系统中每个字符都有一个对应的unicode编码，而每一个字符在操作系统中就是一个矢量图形，例如“敏”这个字，对应的Unicode编码就是\u654f，而字体文件的作用，就是用来规定这些编码对应什么样的图形。unicode字符集里面，E000 至 F8FF属于用户自定义区域。用户可以在字体文件里面定义这些字符的对应的形状，通过项目引入加载去找到自定义字符。而字体图标的实现原理就是在这个自定义区域中添加一系列的图标，我们通过指定对应的Unicode编码来显示图片。

如何使用字体图标

在css3之前，前端只能使用系统的自带字体，得益于css3，我们现在可以使用自定义字体，这使得我们能通过字体文件来实现字体图标，以下是一个使用的例子

@font-face {
    
    
  font-family: 'min';
  src:  url('fonts/min.eot?qdre1m');
  src:  url('fonts/min.eot?qdre1m#iefix') format('embedded-opentype'),
    url('fonts/min.ttf?qdre1m') format('truetype'),
    url('fonts/min.woff?qdre1m') format('woff'),
    url('fonts/min.svg?qdre1m#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon-del {
    
    
  font-family: 'min' !important;
}

.icon-del:before {
    
    
  content: "\e900";/*通过Unicode编码指定图标*/
}

.del{
    
    
    font-size: 40px;
    color:red;
}

<div>这是一个示例图标</div>
<div class="icon-del del"></div>

上面的代码我们通过引入字体文件，指定对应的Unicode编码，渲染出一个图标，效果如截图所示
在这里插入图片描述

如何制作字体文件

伸手党

阿里图标库iconfront，里面提供了很多免费的图标，可以直接选择图标下载对应的字体文字

手工制作

1、准备矢量图形

我们知道字体的实质是一个矢量文件，所以如果我们需要制作一套自定义的字体图标，首先我们需要一个矢量文件，也就是一个svg，svg实际上是一个xml文件，复杂一点的可以用AI( Adobe Illustrator)制作。当然，熟悉语法亦可以手工编写，例如我们手工编写一个绿色的正方形图标代码如下

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" height="100" width="100"  style="stroke:#006600; fill: #00cc00"/>
</svg>

效果如下所示
在这里插入图片描述
当然，如果你手头上只有UI提供的png图标，那也没关系，可以通过在线转换工具，将png转化为svg文件，传送门在此，在线转换的话仅支持比较简单的图标，为了后续方便对颜色的控制，建议仅使用单色的图标进行转换。当然，如果你熟悉AI( Adobe Illustrator)也可以通过它直接将png转化为svg

2、制作字体文件

现在我们有了矢量图标了，我们需要把它制做成字体文件，这里使用另一个在线转换工具，可以通过上传的svg文件生成字体图标
在这里插入图片描述
使用亦比较简单，左上角上传png图标，点击右下角就可以下载对应的字体文件，同时也支持批量生成，读者可以自行摸索。
生成后的文件结构如下所示：

fonts是对应的字体文件，style.css是自动生成的样式文件，可以直接套用，也可以修改后使用。selection.json则是当前所使用的所有图标的一个索引，下次如果要合并新图标到字体文件中，可以把这个selection.json上传到上面的工具网站，生成一个集合，再往集合里面添加新的图标，再次生成字体文件即可