@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/