字体图标的绘制和使用技巧

从事前端的朋友应该对“字体图标”这个词汇不陌生，为了适应愈来愈挑剔的屏幕，网页图标和简单图案使用 .png 来搭建已经基本上被淘汰了。取而代之的是使用 css3 和 svg 来绘制，而对于网页小图标，咱们更但愿在整个系统的前端架构中将它们作成字体库统一管理。以下图：

若是在任意一个页面只须要引用一个 css 样式就能实现库中的任意一个图标，并且只须要定义 font-size 就能控制图标的大小，是否是很方便？

我是主后端的程序员，很早之前就在项目中使用过字体图标，可是以前用于制做图标库的 svg 都是美工帮我画好，因此一直没有深究其中的原理，直到近期不得不本身制做才对其好好研究了一下。

这里先跟你们推荐两个管理字体图标库的工具网站：

icomoon.io

www.iconfont.cn/plus

icomoon 大名鼎鼎，不过我的认为 iconfont 阿里巴巴的矢量图标库更符合国人的使用习惯，能够托管图标，更方便作版本管理，不过缺点是阿里巴巴会对你上传的图标对全部人开放下载，并且每一个图标必需限制在20k之内。

下面我从svg绘制和代码实现两方面将初次制做字体图标遇到的坎和你们分享一下，愿后来者不要入坑。

---

一、svg绘制

首先咱们要准备的是矢量图绘制工具，这里我选择 illustrator，如下是设计师给个人原图：

好，我先直接对它导出看看效果

除了文字，全部部分都不能用，并且蓝色的背景色是不能要的，不可能之后修改了背景色还要去修改图标。

为了找到是什么缘由形成的，我对图标进行了从新绘制。

导出看了一下效果

好了以前惟一可用的文字也没了，因而在 google 和百度上查，最后找到了一则制做说明：

按照要求，我对外面的这个圈，文字（要先进行建立轮廓操做），箭头，还有问号下面这个点进行了轮廓化描边

哈哈，完美！

---

其实在制做过程当中仍是碰到了一个小问题，由于 iconfont 要求制做完成的 svg 必需要小于 20k 才能上传，因为我以前对 illustrator 工具的不了解，按照之前使用 Photoshop 的习惯，对不须要导出的画板和图层进行隐藏，而后存储为 svg 格式，可是文件的大小一直下不来：

我一直觉得是我绘制的问题，实在找不到缘由，因而改变画布的大小在尝试，这种作法可能有点傻，尝试以前我就知道矢量图尺寸跟文件的大小没有一丁点关系，可是也算是瞎猫碰上死耗子，当我增长了一个小画板再存储的时候看到了：

切换小画板再储存确实让文件的大小下来了，算是临时解决问题吧，但总以为应该有更好的方案，这么作太麻烦了，导出以前还得记住画板的序号，这太反人类了，直到有一次我无心中将工做区切换成web工做模式：

原来直接能够将绘制好的图像拖到资源导出的区域，我是在完成全部的工做以后才发现这个功能，想一想浪费的时间，心塞塞的~~~

二、网页实现

解决了svg的绘制问题以后网页上实现就很是简单了，甚至iconfont都已经把代码给咱们写好了：

css

svg {
    background: red;
}

html

<script src="http://at.alicdn.com/t/font_nbcbmernh4pr2j4i.js"></script>
<svg>
    <use xlink:href="#icon-trouble"></use>
</svg>

这段 js 其实就是对 svg 的一个封装，更方便咱们管理图标和实现。

---

个人公众号《捷义》