HTML资料之字体图标

◆ 字体图标优点：

• 可以做出跟图片一样可以做的事情,改变透明度、旋转度，等…
• 本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
• 本身体积更小，但携带的信息并没有削减。
• 几乎支持所有的浏览器
• 移动端设备必备良药…

◆ 字体图标使用流程：

1、UI人员设计字体图标效果图（svg）
2、前端人员上传生成兼容性字体文件包
3、前端人员下载兼容性字体文件包到本多
4、把字体文件包引入到HTML页面中

◆ 设计字体图标：

这个属于UI设计人员的工作， 他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标，保存为svg格式。

◆ 上传生成字体包:

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。

推荐网站： http://icomoon.io

◆ 字体库网站：

1、 icomoon字库：

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

2、阿里icon font字库：

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！

http://www.iconfont.cn/

◆ 下载兼容字体包：

上传完毕后， 网站会给我们把UI做的svg图片转换为我们的字体格式， 然后下载下来。

</