最近在做一個專案時, 研究了一下新浪微博的前端, 看到首頁中那個圖示了嗎, 以前看到這類效果的第一反應就是用一個gif之類的圖示做出來!!

但在研究的過程, 發現了一個小技巧, 注意那個em標籤中的文字是E, 但顯示出來一個類似ICON的圖示. 

既然是HTML+CSS寫出來的, 那麼應該是由css控制顯示出來的效果的.

其他的一些css基本沒什麼問題, 都理解了, 但只有這個 font-family, 強制設定成了 "wbficonregular", 一般作業系統裡應該沒這個命名的字型吧!!

又亂點了一下谷歌的偵錯程式, 發現有載入字型檔案的!! 而且在其中一個字型檔案中, 發現和首頁圖示一樣形狀的東西!! 

百度一下, woff是一種字型檔案!! 

於是我就想 應該也有軟體可以製作自己的字型檔案吧. 百度一下, 找到了名為 FontCreator 的軟體!! 

檔案 -> 新建 

字符集 , 字型樣式 和 預定義輪廓我都按預設值弄,  其中預定義輪廓 選 包括輪廓, 是讓新建的字型檔案預設就有幾個字元的了, 一般我都直接修改就行了!! 

例如我把 數字字元0 修改一下 在數字字元0 上右鍵-> 編輯

在出現的視窗, 點0的正中間 就可以拖動選框, 修改它的形狀 (只為做例項)

=>

好了, 儲存!! 

接下來, 把剛剛做的字型用到html編寫中去!! 

只是做個例項, 還是把css寫到html中吧

谷歌瀏覽器的效果

這個時候不要想完工了, 用萬惡的IE開啟看看

 效果出不來?? 百度一下css自定義字型的相容問題

來源 http://www.w3cplus.com/content/css3-font-face

一、TureTpe(.ttf)格式：

.ttf字型是Windows和Mac的最常見的字型，是一種RAW格式，因此他不為網站優化,支援這種字型的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

二、OpenType(.otf)格式：

.otf字型被認為是一種原始的字型格式，其內建在TureType的基礎上，所以也提供了更多的功能,支援這種字型的瀏覽器有 【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

三、Web Open Font Format(.woff)格式：

.woff字型是Web字型中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支援元資料包的分離,支援這種字型的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字型是IE專用字型，可以從TrueType建立此格式字型,支援這種字型的瀏覽器有【IE4+】；

五、SVG(.svg)格式：

.svg字型是基於SVG字型渲染的一種格式,支援這種字型的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

這就意味著在@font-face中我們至少需要.woff,.eot兩種格式字型，甚至還需要.svg等字型達到更多種瀏覽版本的支援。

(這裡, 我小小偷了一下懶, 我還是用ttf, 因為我還沒找一個好點的ttf轉woff的軟體)

這其中, ttf 轉eot, 需要一個小軟體, 下載地址 http://download.csdn.net/detail/u010488325/6235387

 在f.ttf旁邊就多了一個f.eot, 

用css hack把f.eot檔案加進之前的字型引用中

看效果 

總結一下, 

用這種方法給一些a標籤 ul中的li標籤 加一個icon, 其實很方便的, 而且只要製作的字型檔案內容不多, 它的大小也就幾k吧, 有些情況下相對於圖片的icon好一些.

另外, 這種方法做的icon, 只能是純色的, 像一些icon是有漸變效果的, 還是用圖片會好一些囉, 這個在開發的時候自行衡量唄。