5.4 CSS 3新增的服務器字體

在CSS之前的版本，大部分網站的網頁中設置的都是普通的字體，有的甚至都不設置字體，因為要想在不同的客戶端去顯示正常的字體效果，首先客戶端要有這種字體，否則設置的字體效果將不會顯示。CSS 3新增了服務器字體，很好地解決了這個問題。若客戶端沒有要設置的字體，將會自動下載所設置的字體。

5.4.1 使用服務器字體

使用服務器字體，首先要先定義服務器字體，定義服務器字體使用@font-face來定義，代碼如下：

上面的語法中font-family屬性用于指定服務器字體的名稱，這個名稱可以隨意定義，它用于在需要的位置去引用。src屬性中通過url來指定字體的路徑，format用于指定字體的格式，到目前為止，服務器字體還只支持TrueType格式和OpenType格式。

可以通過以下步驟來實現對服務器字體的使用。

（1）下載需要使用的服務器字體的文件。

（2）使用@font-face把它定義為服務器的字體。

（3）通過@font-family屬性指定使用服務器字體。

【例5-13】（實例文件：ch05\Chap5.13.html）使用服務器字體。

相關的代碼實例請參考Chap5.13.html文件，在Chrome瀏覽器中運行的結果如圖5-13所示。

5.4.2 定義斜體、粗體和粗斜體字

在使用服務器字體時，不像網頁中使用字體，可以指定字體的加粗、傾斜等，如果要在服務器字體中使用加粗和傾斜，需要下載相應的字體文件。

【例5-14】（實例文件：ch05\Chap5.14.html）定義斜體、粗體、粗斜體等服務器字體。

相關的代碼實例請參考Chap5.14.html文件，在Chrome瀏覽器中運行的結果如圖5-14所示。

5.4.3 優先使用客戶端字體

使用服務器字體有一個缺點，瀏覽網頁時需要從遠程服務器下載字體文件，影響網頁的加載速度。所以我們還是應該優先考慮使用客戶端字體，只有當客戶端沒有這種字體時，才考慮使用服務器字體作為替代方案。

在使用@font-face定義服務器字體時，src屬性除了可以使用url來指定服務器文字的路徑之外，也可以使用local指定客戶端字體名稱。

【例5-15】（實例文件：ch05\Chap5.15.html）優先使用客戶端字體。

相關的代碼實例請參考Chap5.15.html文件，在Chrome瀏覽器中運行的結果如圖5-15所示。