把图标转成web字体

对字体大家一定不陌生
一般使用Font-family: Georgia, SimSun, “宋体”设置字体。字体主要使用两种:衬线和非衬线，但这不是我们这章的主要内容。
这章要说的是如何把自己设计的icon转成font，在网页上使用！

字体图标除了图像清晰度之外，主要还是清晰度，特别是用于手机上多屏的情况无论屏幕何种分辨率都不会模糊，不用额外做响应处理。其次是灵活度，使用字体图标可以随意设置大小和颜色，不用因为一点不一样又重新切图。

兼容性，ttf,svg支持低版本，woff支持谷歌火狐等，如果只是手机上使用可以使用woff格式就可以了。特别注意，如果引入字体不在同一个域名下是会出现跨域的，无法下载字体。设置CORS做处理能兼容到ie7。

1,在这里要使用到一个编辑字体的软件FontForgeBuilds，下载地址：网下找一个好了

2,安装完打开之后选择一个字体，或者新建一个字体：

可以看到这是已经有字的字体

3,选择一个空的，右键New Outline Window打开这个字的路径，把我们事先准备好的icon的带路径的svg（这个可以找UI小姐姐帮忙导一个，ai画好icon后路径轮廓化描边导出svg就可以用） 从File处Import进来，调整一下位置，可以在字体那页看到这个icon的显示位置

4,回到字体页，右键该字，选择Glyph Info修改name和value值，value值用于在页面上显示

5,生成字体，从File处Generate Fonts，选择要生成的字体格式，和存放的位置，确定后点击Generate ，接下来会弹出错信息但不要管它，直接Generate。

6,使用&＃x0001;为刚刚编辑的那个字的标识

&＃x0001;123456

我们刚刚导入的那个搜索icon就出来了：

感觉牛X轰轰，我都被自己征服