CSS中iconfont的使用詳解-css教學-PHP中文網

首頁

web前端

css教學

CSS中iconfont的使用詳解

黄舟

Dec 23, 2016 pm 03:39 PM

本教學說明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 ;

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

-webkit-font-smoothing: ); -moz-osx-font-smoothing: grayscale;}

第三步：挑選對應圖示並取得字體編碼，套用至頁

#x33

效果如下

鋸齒優化，有時得到的效果並沒有想像中那麼銳利。尤其是在不同系統下對文字進行抗鋸齒的演算法不同，可能會導致顯示效果不同。
Icon Font 作為字體，Icon 顯示的大小和位置可能會受到font-size、line-height、word-spacing等等 CSS 屬性的影響。 Icon 所在容器的 CSS 樣式可能對 Icon 的位置產生影響，調整起來很不方便。

使用上有不便。首先，載入一個包含數百圖標的 Icon Font，卻只使用其中幾個圖標，非常浪費載入時間。如果是自己製作 Icon Font 以及把多個 Icon Font 中用到的圖示整合成一個 Font 也非常不方便。當然使用阿里UX向量圖示庫可以解決這個問題

為了實現最大程度的瀏覽器支持，可能要提供至少四種不同類型的字體檔案。包括TTF、WOFF、EOT 以及一個使用 SVG 格式定義的字型。如果是自己製作的話，可能要頭痛死

以上就是CSS中iconfont的使用詳解的內容，更多相關內容請關注PHP中文網（www.php.cn）！