阿里字體圖標(biāo)庫(kù)介紹及圖標(biāo)字體的使用方法
這篇文章只講阿里字體圖標(biāo)庫(kù)的使用要糊，暫不講圖標(biāo)制作盼砍，阿里矢量圖標(biāo)庫(kù)上的字體圖標(biāo)已經(jīng)很多了，幾乎項(xiàng)目中需要的圖標(biāo)大部分都能找到沽翔。字體圖標(biāo)的好處：字體圖標(biāo)是矢量的兢孝，可以無(wú)限放大不模糊，可以通過(guò)改變字體顏色color來(lái)改變圖標(biāo)顏色仅偎，再也不用做圖片雪碧圖了跨蟹，換圖標(biāo)的話，如果保持名字和編碼不變的話橘沥，就不用更改css或者類名窗轩，有這幾個(gè)好處就有足夠的理由來(lái)使用字體圖標(biāo)庫(kù)了先來(lái)看個(gè)圖標(biāo)庫(kù)頁(yè)面截圖
?步驟一、阿里圖標(biāo)庫(kù)的網(wǎng)址：http://www.iconfont.cn/?進(jìn)入首頁(yè)威恼，選擇微博賬號(hào)登錄
?步驟二品姓、點(diǎn)擊導(dǎo)航上的“圖標(biāo)庫(kù)”選擇圖標(biāo)庫(kù)寝并，然后選擇自己看中的圖標(biāo)
?步驟三箫措、點(diǎn)擊看中的圖標(biāo)以后，圖標(biāo)會(huì)被收入到右上角你賬號(hào)的右邊盒子里
?步驟四衬潦、點(diǎn)開(kāi)盒子斤蔓，選擇存儲(chǔ)為新項(xiàng)目還是老項(xiàng)目中去，保存完以后會(huì)直接進(jìn)入到第五步
?步驟五镀岛、從頂部導(dǎo)航上的圖標(biāo)管理弦牡，可以進(jìn)入自己的圖標(biāo)項(xiàng)目頁(yè)面友驮，
?步驟六、在圖標(biāo)項(xiàng)目頁(yè)面驾锰，可以編輯你的圖標(biāo)
主要是編輯圖標(biāo)占這個(gè)區(qū)域的大小范圍卸留，移動(dòng)圖標(biāo)等，圖標(biāo)的名字特別重要椭豫，一定要給字體圖標(biāo)起個(gè)好名字耻瑟，要不然一個(gè)爛的名字，出現(xiàn)在你的網(wǎng)頁(yè)中赏酥，如果你有強(qiáng)迫癥的話會(huì)很郁悶的喳整。
?步驟七、可以下載圖標(biāo)裸扶，也可以引用在線圖標(biāo)
我還是喜歡下載過(guò)來(lái)框都，一般情況下，圖標(biāo)字體是不能跨域使用的呵晨，一定要跨域是需要做些配置魏保，暫且不提。
?步驟八何荚、那就是如何在網(wǎng)頁(yè)中使用了囱淋，
第一步：使用font-face聲明字體
@font-face {font-family: 'iconfont'
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome餐塘、firefox妥衣、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
第二步：定義使用iconfont的樣式
.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;}
第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼戒傻，應(yīng)用于頁(yè)面
<i class="iconfont">3</i>
如果不能直觀的知道字體圖標(biāo)啥樣子了税手，就打開(kāi)字體包中的demo.html看一看，你要登錄阿里字體庫(kù)網(wǎng)站項(xiàng)目中查看也可以需纳。
注意：谷歌瀏覽器不能直接打開(kāi)demo.html查看到字體圖標(biāo)芦倒，需要在服務(wù)器環(huán)境下才可以，我用的webStorm在預(yù)覽html的時(shí)候不翩，就類似于一個(gè)web服務(wù)器
