HTML中用自定義字體實現小圖標icon(不是原做, 只是一個研究筆記)

最近在作一個項目時, 研究了一下新浪微博的前端, 看到首頁中那個圖標了嗎, 之前看到這類效果的第一反應就是用一個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

1、TureTpe(.ttf)格式：

.ttf字體是Windows和Mac的最多見的字體，是一種RAW格式，所以他不爲網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

2、OpenType(.otf)格式：

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

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

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

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

.eot字體是IE專用字體，能夠從TrueType建立此格式字體,支持這種字體的瀏覽器有【IE4+】；

5、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是有漸變效果的, 仍是用圖片會好一些囉, 這個在開發的時候自行衡量唄!!