Font Awesome 字體使用方法， 兼容ie7+

WebFont 技術可讓網頁使用在線字體，而無需使用圖片，從而有機會解決開頭設計師提到的問題。它經過 CSS 的@font-face語句引入在線字體，使用 CSS 選擇器指定運用字體的文本，與此同時專用於 Web 展現的 woff 格式字體也獲得各大瀏覽器廠商支持，進一步減小了字體的體積。在國外，WebFont 已經很是流行了，大量的網站使用了 WebFont 技術，而業界大佬 Google 也順勢推出的免費 WebFont 雲託管服務，這一切均帶動了國外字體制做行業的高速發展。

1、首先介紹Font Awesome 字體的使用場景

先截圖幾張，你們看一下效果(紅色框內即便用了web font)

    

2、連接一個下載地址：

http://www.thinkcmf.com/font/index.html

 

3、解壓後的文件目錄格式

　　　　

css文件夾目錄

　　　　

font-awesome.css----未壓縮的css文件

font-awesome.min.css----壓縮後的css文件

font-awesome-ie7.min.css----壓縮後兼容ie7+的css文件

fonts文件夾目錄

說明一下各個文件的功能

1、OpenType(.otf)格式：

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

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

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

3、SVG(.svg)格式：

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

4、TureTpe(.ttf)格式：

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

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

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

這就意味着在@font-face中咱們至少須要.woff,.eot兩種格式字體，甚至還須要.svg等字體達到更多種瀏覽版本的支持。

裏面包含了四個文件夾，不過咱們只須要的就用css  ， fonts 兩個文件夾的內容就ok

 4、接下來就是重要的步驟了--使用方法

步驟一：連接css文件

<link rel="stylesheet" type="text/css" href="Awesome/css/font-awesome.min.css"/>

<link rel="stylesheet" type="text/css" href="Awesome/css/font-awesome-ie7.min.css"/>  /*兼容ie7+*/

步驟二：開始添加圖標（注意：fa 是必定要添加的）

<i class="fa fa-camera-retro"></i> fa-camera-retro

顯示效果：

使用起來很是方便呢！哦，對了最後附上一個圖標參考網址：http://www.thinkcmf.com/font/想用什麼圖標查詢便可食用

最後在加一點：圖標能夠當普通的字體使用哦，嘗試設置一下 color 屬性   text-align 屬性看看吧