工具
-
Adobe illustrator
AI是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件，是一款非常好的矢量图形处理工具。
该软件主要应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等，也可以为线稿提供较高的精度和控制，适合生产任何小型设计到大型的复杂项目
*SVG即为矢量图
-
FontLab
FontLab是一个专业级的字体编辑软件，广泛应用于字体 设计人员和排版印刷业等专业场合。
它能够对已有的字体进行修改，也可以完全按照要求 重新设计需要的字体。
字体兼容处理网站
处理完成后： demo、selection、demo-files都是多余的，可以删掉
自定义字体
@font-face {
font-family: ; <!-- 自定义文字名称 -->
src: url(); <!-- 导入字体文件 -->
}
自定义图标设计基本思路
1. 设计一套矢量图（用AI）交给UI设计师来做
2. 将不同的矢量图绑定到不同的字符上生成自定义字体（fontLab）
3. 一般通过工具或者站点来处理（字体兼容处理网站）
4. 在页面中运用
- 犯的错：注意逻辑结构！！！！
<div class="icon-bank path1 path2 path3 path4 path5 path6 path7 path8 "></div>
- 对于前端开发人员来说，我们首先要从UI设计师手里得到，我们需要的矢量图，然后自己处理成我们需要的自定义字体图标。
附加：
-
Unicode 引用
Unicode 是字体在网页端最原始的应用方式，特点是：
- 兼容性最好，支持 IE6+，及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小，颜色等等。
- 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
-
font-class 引用
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。 与 Unicode 使用方式相比，具有如下特点：
- 兼容性良好，支持 IE8+，及所有现代浏览器。
- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
-
Symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
- 兼容性较差，支持 IE9+，及现代浏览器。
- 浏览器渲染 SVG 的性能一般，还不如 png。
