00字體圖標iconfont的製做與使用--阿里矢量圖庫

 

1、iconfont的使用範圍

　　在工做當中，常常會用到嵌在元素裏的小圖標

在這種狀況下，若是使用<img>標籤或者用做背景圖片，也能實現這種效果。可是若是這麼作的話，就必須把圖片一個個切下來作成精靈圖，過於麻煩。並且圖標通常都會改變顏色形狀，就要求一個圖標製做多個狀態的圖。另外，背景圖片還牽扯到background-size的兼容性問題，不容易控制大小和位置。而使用字體圖標，徹底能夠避免這些問題，不只 能夠改變大小，還能夠改變顏色。

2、經常使用字體圖標的方式

1. 阿里巴巴矢量圖庫（ http://www.iconfont.cn/ ）
2. fontello（ http://fontello.com/ ）
3. icommoon（ http://icomoon.io/app/#/select ）
4. font-awesome（ http://fortawesome.github.io/Font-Awesome/ ）
5. glyphicon halflings（ http://glyphicons.com/ ）

3、阿里圖庫的使用步驟

　　1.打開圖庫的網址（ http://www.iconfont.cn/ ）

　　2.能夠製做也能夠搜索找到本身須要的圖標，將其加入購物車

　　3.打開購物車就能夠看到以前找到的圖標了，點擊下載代碼

　　4.解壓下載的壓縮包，就會看到裏面有一堆的東西

　　5.這個壓縮包中其實有三種引入方式，咱們打開相應的html文件就能夠查看每種引入方式的具體信息

4、三種引入方式的優點和缺陷

　　1.font-class引用方式

　　　　a)包含

　　

　　　　b)引入

<link rel="stylesheet" type="text/css" href="fontclass/iconfont.css" />

　　　　c)使用

　　　　　　** icon-xxx經過看上面的html文件看到

1 <i class="iconfont icon-xxx"></i>

 

　　　　d)特色

　　　　　　i.兼容：IE8+

　　　　　　ii.語義明確，書寫直觀

　　　　　　iii.使用class定義圖標，替換方便

　　　　　　iv.不支持多色圖標

　　2.unicode引用方式

　　　　a)包含

　　　　b)引入

1 <script type="text/javascript" src=" symbol/iconfont.js" ></script>

 

**css文件中加入

1 .icon {
2    width: 1em; height: 1em;
3    vertical-align: -0.15em;
4    fill: currentColor;
5    overflow: hidden;
6 }

 

　　　　c)使用

1 <svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use></svg>

 

　　　　d)特色

1. 1. 　　兼容：IE9+
   2. 　　支持多色圖標，再也不受單色限制
   3. 　　支持經過font-/color調整字體樣式
   4. 　　瀏覽器渲染svg的性能通常

　　3.symbol引用方式

　　　　a)包含

　　　　b)引入

** css文件加入

 1 @font-face {
 2   font-family: 'iconfont';
 3   src: url('unicode/iconfont.eot地址');
 4   src: url('unicode/iconfont.eot地址?#iefix') format('embedded-opentype'),
 5   url('unicode/iconfont.woff地址') format('woff'),
 6   url('unicode/iconfont.ttf地址') format('truetype'),
 7   url('unicode/iconfont.svg地址#iconfont') format('svg');
 8 }
 9 .iconfont{
10   font-family:"iconfont" !important;
11   font-size:16px;font-style:normal;
12   -webkit-font-smoothing: antialiased;
13   -webkit-text-stroke-width: 0.2px;
14   -moz-osx-font-smoothing: grayscale;
15 }

 

　　　　c)使用

1 <i class="iconfont">&#xxxxx;</i>

 

　　　　d)特色

1. 兼容性：IE6+
2. 支持按字體方式動態調整圖標顏色大小
3. 不支持多色