Iconfont-阿里巴巴矢量庫下載的字體

https://www.cnblogs.com/xiaomingge/articles/5421503.html

1、下載

下載就是先將所選擇的圖標加入購物車，而後從購物車裏下載代碼就行，下載下來就是一個壓縮包，解壓後如

2、如何離線調用

如第一步先將字體下載至本地，且必定要把demo裏的兩個文件.ttf和.woff引入。

1.打開demo_unicode.html就能夠看見unicode碼和如何引入。

2.1 引入文件 

2.2 html代碼

<div>
    <p class="iconfont">&#xe613;</p>
    <p class="iconfont">&#xe614;</p>
    <p class="iconfont">&#xe651;</p>
</div>

2.3 CSS代碼

打開demo下的iconfont.css文件,以下：

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1519883495629'); /* IE9*/
  src: url('iconfont.eot?t=1519883495629#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff） format('woff'),
  url('iconfont.ttf?t=1519883495629') format('truetype'),/*chrome,firefox,opera,safari,Andriod,ios 4.2+*/
 url('iconfont.svg?t=1519883495629#iconfont') format('svg');/*ios 4.1-*/

}

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

.icon-shouye:before { content: "\e613"; }

.icon-shouye1:before { content: "\e614"; }

.icon-icon:before { content: "\e651"; }

複製到本身的CSS代碼：

@font-face {font-family: "iconfont";
  src: url('font/iconfont.eot?t=1519883495629'); /* IE9*/
  src: url('font/iconfont.eot?t=1519883495629#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff） format('woff'),
  url('font/iconfont.ttf?t=1519883495629') format('truetype'),/*chrome,firefox,opera,safari,Andriod,ios 4.2+*/
  url('font/iconfont.svg?t=1519883495629#iconfont') format('svg');/*ios 4.1-*/

}

.iconfont {
  font-family:"iconfont" !important;
  font-size:36px;
  color:blue;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

改變一下url路徑,字體大小，顏色便可。