font-face字体图标制作和使用

字体图标，就是将字体包的字符改变为图片，通过字符来显示图标，这样就可以通过改变字体的样式来改变图标的样式，比如大小、颜色等

首先要用ai换出一个矢量图形，再将图形复制到字体编辑器上

字体编辑器有很多种，比如fontcreator、fontlab，我这里用的是fontcreator

打开编辑器，新建一个字体包

选中一个字符双击

将制作好的矢量图形复制进去

这样"A"这个字符就被图形所替代了，接着将字体包存储为ttf格式的文件

因为不同浏览器的兼容问题，还需要将ttf格式的字体包转成eot、woff、woff2、svg等格式的文件

这是一个字体包转格式的网站，可以将ttf格式的文件同时转成多种的

https://www.fontsquirrel.com/tools/webfont-generator

选中这几种格式然后现在就好了

下载成功之后可以看到下面这些文件

其中有一个css文件已经将font-face写好了，可以直接引用，当然也可以自己写

@font-face {

font-family: 'icon';

src: url('ico.eot'); /* IE9*/

src: url('ico.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('ico.woff') format('woff'), /* chrome、firefox */

url('ico.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

url('ico.svg#ico') format('svg'); /* iOS 4.1- */

}

要特别注意路径问题，其中font-family是新的图形字体包的名字，可以自己更改

使用方法直接在font-family写上对应的名字即可，可以通过改变字体的大小颜色来改变图标的大小和颜色

p{

font-family: 'icon';

font-size: 50px;

color: #4C637B;

}