CSS中iconfont的使用方法

本篇內(nèi)容介紹了“CSS中iconfont的使用方法”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

初識iconfont

就算我們一開始不懂這個英文不懂是干嘛的，對于iconfont，英文從后往前讀應(yīng)該叫做：字體圖標。這里面已經(jīng)包含兩個概念，首先必須是字體，第二，就是圖標。我們都知道網(wǎng)頁中的字體我們可以控制大小、樣式、變形、拉伸、默認字體等屬性，所以這個iconfont必須是以文字嵌入到樣式中，所以想到的必須是font；既然是圖標那么它就必須有一個路徑來引入進來，首先我們一開始想到的img這個標簽，既然又是文字又是圖標，我們能想到的就只有這個@font-facecss3屬性。

還有這個iconfont后來詞語，并不是一開始就出現(xiàn)的，網(wǎng)頁制作者或者學(xué)者想要叫起來更爽口所賦予的一個表現(xiàn)層的東西。

所以，當我們看見阿里巴巴的iconfont的圖標教程如下：

第一步：使用font-face聲明字體

CSS Code復(fù)制內(nèi)容到剪貼板

1. @font-face {font-family: 'iconfont';   

2.     src: url('iconfont.eot'); /* IE9*/  

3.     src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  

4.     url('iconfont.woff') format('woff'), /* chrome、firefox */  

5.     url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  

6.     url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */  

7. }  

第二步：定義使用iconfont的樣式

CSS Code復(fù)制內(nèi)容到剪貼板

1. .iconfont{   

2.     font-family:"iconfont" !important;   

3.     font-size:16px;font-style:normal;   

4.     -webkit-font-smoothing: antialiased;   

5.     -webkit-text-stroke-width: 0.2px;   

6.     -moz-osx-font-smoothing: grayscale;}  

第三步：挑選相應(yīng)圖標并獲取字體編碼，應(yīng)用于頁面

CSS Code復(fù)制內(nèi)容到剪貼板

1. <i class="iconfont">#x33</i>  

效果如下

但是，Iconfont存在一些弊端：

    瀏覽器將其視為文字進行抗鋸齒優(yōu)化，有時得到的效果并沒有想象中那么銳利。 尤其是在不同系統(tǒng)下對文字進行抗鋸齒的算法不同，可能會導(dǎo)致顯示效果不同。
    Icon Font 作為一種字體，Icon 顯示的大小和位置可能要受到font-size、line-height、word-spacing等等 CSS 屬性的影響。 Icon 所在容器的 CSS 樣式可能對 Icon 的位置產(chǎn)生影響，調(diào)整起來很不方便。
    使用上存在不便。首先，加載一個包含數(shù)百圖標的 Icon Font，卻只使用其中幾個圖標，非常浪費加載時間。 如果是自己制作 Icon Font 以及把多個 Icon Font 中用到的圖標整合成一個 Font 也非常不方便。當然使用阿里UX矢量圖標庫可以解決這個問題
    為了實現(xiàn)最大程度的瀏覽器支持，可能要提供至少四種不同類型的字體文件。包括TTF、WOFF、EOT 以及一個使用 SVG 格式定義的字體。

“CSS中iconfont的使用方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！