什麼是Iconfont?介紹Iconfont的好處及使用

來源:互聯網
上載者:User
是前一陣同事在taobao網按F12後得到的驚喜:


taobao字母表

看過此圖你是否有一絲失落呢!騷年,不打緊的,奮起直追吧!

看過此表,我想說說Iconfont這個東東,單純靠第一感覺,我想到的是 Iconfont == Icon + font?

實際結果如同我們想的,將icon和font結合就是Iconfont,這個技術相對來說算是比較成熟的了

  • 國內可以看阿里媽媽表徵圖庫

  • github上也有一個熱門的項目在這裡,

  • 還有一個網站可以線上製作自己的表徵圖集fontello,最終會產生對應的css檔案和字型檔,並且還提供呢針對IE瀏覽器的支援

Iconfont的好處是什麼呢?

  1. 自由變化大小

  2. 自由修改顏色

  3. 可以添加一些視覺效果如:陰影、旋轉、透明度。

  4. 相容IE6

上面的幾點是不是完敗原始的icon,缺點也有就是色彩過於單調,是純色的。

是font-awesome的css檔案裡面的部分內容,從名字來看像是icon的定義,但是\f002 \f003這些內容到底什什麼東西呢?使用字型編輯軟體開啟下載下來的字型檔後你就明白了。


font-awesome css 檔案內容


icon對應的編碼

哈哈,有沒有覺得這個想法很贊呢!

怎麼使用自創的字型檔呢

這裡要介紹的是@font-face,這個語句的瀏覽器安全色性也很好,包括低版本的IE支援的也是很好。但是各個瀏覽器對於可用字型的相容就並不那麼友好了,這裡介紹了各瀏覽器對字型格式的支援情況
下面代碼是font-awesome中的實現

@font-face {  font-family: 'FontAwesome';  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype');  font-weight: normal;  font-style: normal;}.fa {  display: inline-block;  font: normal normal normal 14px/1 FontAwesome;  font-size: inherit;  text-rendering: auto;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}

@font-face 中有部分內容省略,源碼在這裡可以看到,先是使用@font-face 定義了一種字型FontAwesome,然後再.fa中使用了FontAwesome字型

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤(2)-css視頻教程

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.