初識iconfont
就算我們一開始不懂這個英文不懂是幹嘛的，對於iconfont，英文從後往前讀應該叫做：字型圖示。這裡面已經包含兩個概念，首先必須是字型，第二，就是圖示。我們都知道網頁中的字型我們可以控制大小、樣式、變形、拉伸、預設字型等屬性，所以這個iconfont必須是以文字嵌入到樣式中，所以想到的必須是font；既然是圖示那麼它就必須有乙個路徑來引入進來，首先我們一開始想到的img這個標籤，既然又是文字又是圖示，我們能想到的就只有這個@font-facecss3屬性。
還有這個iconfont後來詞語，並不是一開始就出現的，網頁製作者或者學者想要叫起來更爽口所賦予的一程式設計客棧個表現層的東西。
所以，當我們看見阿里巴巴的iconfont的圖示教程如下：
第一步：使用font-face宣告字型
css code複製內容到剪貼簿
第二步：定義使用iconfont的樣式
css code複製內容到剪貼簿
第三步：挑選相應圖示並獲取字型編碼，應用於頁面
css code複製內容到剪貼簿
效果如下
但是，iconfont存在一些弊端：
瀏覽器將其視為文字進行抗鋸齒優化，有時得到的效果並沒有想象中那麼銳利。 尤其是在不同系統下對文字進行抗鋸齒的演算法不同，可能會導致顯示效果不同。
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的使用
本文位址:
HTML中的iconfont使用
之前遇到乙個用iconfont的demo，這是第一次遇到iconfont，使用審查元素可以看到這是一種用字元表示的方法，而且放大或者縮小的時候不會失真，即具有向量性，相容性很好。於是上網查了一下這個東西，發現現在大多數 都會使用iconfont，下面就分享一下圖示字型的使用 阿里媽媽字型庫 2 宣告...
Iconfont 在HTML中的使用
a.進入阿里巴巴向量圖示庫www.iconfont.cn挑選所需的圖示，加入購物車 unicode 是字型在網頁端最原始的應用方式，特點是 注意 新版 iconfont 支援多色圖示，這些多色圖示在 unicode 模式下將不能使用，如果有需求建議使用symbol 的引用方式 使用步驟如下 第一步 ...
css中position的詳解
position 屬性規定元素的定位型別。目前所有的瀏覽器均支援position定位。預設值為static。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成乙個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。1 absolute...