本教學說明CSS中iconfont的使用詳解
初識iconfont
就算我們一開始不懂這個英文不懂是乾嘛的，對於iconfont，英文從後往前讀應該叫做：字體圖示。這裡面已經包含兩個概念，首先必須是字體，第二，就是圖示。我們都知道網頁中的字體我們可以控制大小、樣式、變形、拉伸、預設字體等屬性，所以這個iconfont必須是以文字嵌入到樣式中，所以想到的必須是font；既然是圖示那麼它就必須有一個路徑來引入進來，首先我們一開始想到的img這個標籤，既然又是文字又是圖標，我們能想到的就只有這個@font-facecss3屬性。
還有這個iconfont後來詞語，並不是一開始就出現的，網頁製作者或者學者想要叫起來更爽口所賦予的一個表現層的東西。
所以，當我們看見阿里巴巴的iconfont的圖標教學如下：
第一步：使用font-face聲明字體
@font-face {font-family: 'iconfont';
.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype ('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}
第二步：定義使用iconfont ;
-webkit-font-smoothing: ); -moz-osx-font-smoothing: grayscale;}
第三步：挑選對應圖示並取得字體編碼，套用至頁
#x33
效果如下
鋸齒優化，有時得到的效果並沒有想像中那麼銳利。 尤其是在不同系統下對文字進行抗鋸齒的演算法不同，可能會導致顯示效果不同。
Icon Font 作為字體，Icon 顯示的大小和位置可能會受到font-size、line-height、word-spacing等等 CSS 屬性的影響。 Icon 所在容器的 CSS 樣式可能對 Icon 的位置產生影響，調整起來很不方便。
為了實現最大程度的瀏覽器支持，可能要提供至少四種不同類型的字體檔案。包括TTF、WOFF、EOT 以及一個使用 SVG 格式定義的字型。如果是自己製作的話，可能要頭痛死
以上就是CSS中iconfont的使用詳解的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！ 
