字体图标

1.字体格式

 （1）TureType(.ttf)格式

   .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

 （2）OpenType(.otf)格式

  .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

 （3）Web Open Font Format(.woff)格式

  woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

 （4）Embedded Open Type(.eot)格式

 .eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

 （5）SVG(.svg)格式

 .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

2.字体图标使用流程

1.设计字体的图标

2.上传生成字体包

（1）icomoon字库

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

推荐网站： http://www.iconfont.cn/

（2）阿里icon font字库

http://www.iconfont.cn/

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

3.下载兼容字体包

4.字体引入到HTML中

首先把 以下4个文件放入到 fonts文件夹里面。主要包括iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff文件；

（1）在样式里面声明字体： 告诉别人我们自己定义的字体

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

（2）给盒子里面添加结构

   <span></span> 

3.追加新图标到原来的库里面

把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。