制作字体图标

一、使用AI制作需要的svg文件

1.下载需要的字体

可以去这个网站找到需要的字体：http://www.zitiweb.com/

2.打开ai制作

• 新建一个画板
• 输入文字
  
• 选择文字
  
• 创建轮廓
  
  
• 取消分组
  
• 打散文字
  
  
• 改变画板大小，并保存svg
  
  
  

二、使用工具生成字体

1.下载工具

开源工具下载地址：https://github.com/thunkli/panda

2.使用工具

3.生成字体

生成的字体在当前目录的demo文件夹中

三、使用字体图标

1.将字体声明在Css文件中

@font-face {
    font-family: "iconfont";
    src: url("iconfont.eot");
    src: url("iconfont.eot?#iefix") format("embedded-opentype"),
    url("iconfont.woff") format("woff"),
    url("iconfont.ttf") format("truetype"),
    url("iconfont.svg#iconfont") format("svg");
}

2.定义字体图标的样式

.iconfont {
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

3.使用字体图标

<i class="iconfont">&#x1001;</i>