CSS3新屬性：在網站中使用訪客電腦里沒有安裝的字體

CSS的font-family屬性使網頁可以使用客戶電腦里的字體，從而得到多姿多彩的WEB頁面，但當客戶端沒有你想要使用的字體時怎么辦呢？我們總不能讓每個訪問者都去安裝一個字體吧？事實上，這是可以的！不過不是訪客主動下載的，而是網站開發者幫訪客下載安裝的，具體怎么實現的，我們還要從字體文件的格式說起。


字體格式類型主要有幾個大分類：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。  
TrueType
 Windows和Mac系統最常用的字體格式，其最大的特點就是它是由一種數學模式來進行定義的基於輪廓技術的字體，這使得它們比基於矢量的字體更容易處理，保證了屏幕與打印輸出的一致性。同時，這類字體和矢量字體一樣可以隨意縮放、旋轉而不必擔心會出現鋸齒。  
EOT – Embedded Open Type (.eot)
 EOT是嵌入式字體，是微軟開發的技術。允許OpenType字體用@font-face嵌入到網頁並下載至瀏覽器渲染，存儲在臨時安裝文件夾下。  
OpenType (.otf)
 OpenType是微軟和Adobe共同開發的字體，微軟的IE瀏覽器全部采用這種字體。致力於替代TrueType字體。  
WOFF – Web Open Font Format (.woff)

WOFF（Web開發字體格式）是一種專門為了Web而設計的字體格式標准，實際上是對於TrueType/OpenType等字體格式的封裝，每個字體文件中含有字體以及針對字體的元數據（Metadata），字體文件被壓縮，以便於網絡傳輸。

SVG (Scalable Vector Graphics) Fonts (.svg)
 SVG是由W3C制定的開放標准的圖形格式。SVG字體就是使用SVG技術來呈現字體，還有一種gzip壓縮格式的SVG字體。
 
 在CSS3中，添加了一個@face-face屬性，通過這個屬性我們就可以加載服務器上的字體文件，放在客戶機的臨時安裝文件夾下，
 
 用法如下：

@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    src: url("fontawesome-webfont.eot?#iefix") format("eot"), url("fontawesome-webfont.woff") format("woff"), url("fontawesome-webfont.ttf") format("truetype"), url("fontawesome-webfont.svg#FontAwesome") format("svg");
}