@font-face使用在線字體

　　@font-face規則在CSS3規范中屬於字體模塊，該規則的推出對於網頁設計來說是一個革命性的進步。在傳統設計中，設計師不敢使用各種藝術字體類型，甚至是常規字體也需要慎重使用。因為設計師必須考慮每位瀏覽者的系統中是否安裝了所有字體。有了@font-face規則，這個顧慮就可以放下了：只要在互聯網上指定一種字體類型源，而不管用戶電腦是否安裝該字體，設計的網頁都能夠正確顯示。

　　用較為專業的話來講，@font-face能夠加載服務器端的字體文件，讓客戶端瀏覽器顯示客戶端沒有安裝的字體。如果沒有@font-face規則，瀏覽器只能夠在客戶端系統中尋找指定字體，這就給網頁設計帶來了很多限制，妨礙了設計師的創意設計，也就無法展現豐富多彩的字體藝術。

　　@font-face規則的語法格式如下：

@font-face { <font-description> }

　　@font-face規則的選擇符是固定的，用來引用服務端的字體文件。<font-description>是一個屬性名值對，格式類似如下樣式：

description: value;
description: value;
description: value;
{...}
description: value;

　　屬性及其取指說明如下：

• font-family：設置文本的字體名稱。
• font-style：設置文本樣式。
• font-variant：設置文本是否大小寫。
• font-weight：設置文本的粗細。
• font-stretch：設置文本是否橫向拉伸變形。
• font-size：設置文本字體大小。
• src：設置自定義字體的相對路徑或者絕對路徑。

　　需要注意的是，低版本IE瀏覽器只支持微軟自有的.eot（Emberdded）字體樣式，而其他瀏覽器都不支持這一格式。不過，從Safari3.1開始，網頁重構工程師已經可以設置.ttf（TrueType）和.oof（OpenType）兩種字體作為自定義字體了。

　　下面我們來看一個簡單的示例：

 /*引入外部字體文件*/
@font-face{
   font-family: myFirstFont;
   /*eot格式兼容IE*/
   src:url(fonts/AdineKirnber.eot);
   /*ttf格式兼容非IE*/
   src:url(fonts/AdineKirnber.ttf);
}
h1{
   font-family: myFirstFont,verdana,sans-serif;
   font-size:4em;
}

運行效果如下：

查看在線運行效果

　　注意：嵌入外部字體的做法對於中文網站來說不太適用。因為一個中文字體文件小的也有幾M，大的有十幾M，這么大的字體，其下載過程讓人難以忍受，同時服務器也不能接受如此頻繁的下載請求。所以對於中文來說，如果只是想標題使用特殊字體，最好設計成圖片。由於英文字體只有幾十kb，與一張圖片的大小差不多，如果有大量的文字需要使用該字體，存儲、帶寬方面就划算多了。

最后，附上兩個在線字體轉換格式的網站：

font2web：http://www.font2web.com/

freefontconverter：http://www.freefontconverter.com/