使用阿里巴巴矢量图iconfont以及webfont的步骤详解

一、使用阿里iconfont矢量图步骤

• 第一步，首先进入阿里巴巴矢量图标库首页（http://www.iconfont.cn）
  
• 第二步，将需要的图标添加入库
  
• 第三步，从购物车中下载代码
  
• 第四步，将下载完成的压缩包解压，将其中的文件放入到项目中某个文件夹下（当将文件放在某个文件夹下时，font-face中代码的url路径将会有一些改变，在这里假设放进了font文件夹），并将其中的demo_unicode.html文件打开
  
• 第五步，将需要的图标的unicode编码复制到标签中
  

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

• 注意： 当需要放置Unicode编码的是伪元素的content属性时，需要将该编码的前三位用 “ \ ”替换。否则图标将不会出现

 div::before {
     content: "\e601;";
  }

• 第六步，从demo_unicode.html文件中，将其中的font-face代码复制到CSS样式表中。(其中的font-family值可以自定义)，由于第四步中文件是放在font文件夹下，因此font-face的url路径需要加上” font/ “。

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

• 第七步，定义一个类，来设置font-famliy属性是自己定义的值

.my-font {
    font-famliy: "diyfont";
}

• 最后，将定义好的类加在含有Unicode编码的标签上，并且可以对该标签进行一些其他的样式设置，改善观看效果。

 <i class="my-font">&#xe601;</i>

二、使用阿里webfont矢量图步骤

使用webfont的用法和iconfont的用法相似，相比起来，使用webfont步骤更少，更为简单。

• 第一步，进入阿里妈妈webfont平台。
  
• 第二步，将需要的字体下载下来，并解压，将其中的文件放入项目中，并将其中的demo.html文件打开
  
  
• 第三步，使用font-face声明字体(在这里文件放在font文件夹下，因此url值有所改变)。

@font-face {font-family: 'webfont';
            src: url('font/webfont.eot'); /* IE9*/
            src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('font/webfont.woff') format('woff'), /* chrome、firefox */
            url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
        }

• 第四步，定义一个类，来指定font-famliy属性值

.web-font{
      font-family:"webfont";
   }

• 最后，将该类加在对应标签上，并且可以设置一些其他的样式进行修改。