《HTML5+CSS3網頁設計入門必讀》——6.4 使用Web字型

本節書摘來自異步社群《html5+css3網頁設計入門必讀》一書中的第6章，第6.4節,作者： 【美】julie meloni更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

在上一節中，看到我們十分确信所用的字型系列駐留在每個人的計算機上。也就是說，可以保證大多數計算機都會呈現arial或times new roman，或者具有用于serif和sans-serif的所必需的預設字型，如果這是樣式表所需要的話。但是，利用css3中包括的@font-face特性，甚至可以對線上放置的内容發揮更大的設計能力。

簡而言之，@font-face特性允許在html5标記中定義要使用的字型，使得無論使用者是否在他們的計算機上安裝了那些字型（并且很有可能使用者沒有在他們自己的計算機上安裝你所選的奇特字型），都會顯示出它們。字型的定義可以是本地的（對于你的web伺服器而言，如果你在意在那裡包括字型檔案的話），或者是遠端的（可以連結到許多字型存儲的位置）。

在樣式表中，要定義在整個頁面中使用的新字型，可以簡單地使用下面的結構：

在定義它之後，可以在樣式表中的其他任何位置引用font-family，如下所示：

但是，你可能會問，從哪裡獲得字型呢？可以從許多位置獲得字型—有一些字型是免費的，其他字型則不然。一個廣泛流行的位置是google web fonts，這不僅是因為這裡的字型是免費的，而且因為google被廣泛認可為提供了一個穩定的平台，如果你的web排版樣式依賴于駐留在别人的web伺服器上的字型，這就很重要。其他一些用于獲得字型的可靠的付費站點是typekit和fontspring。付費站點不一定很糟糕，藝術家們也必須掙錢。我在typekit上進行了個人訂購，并且對它們的服務非常滿意，但是我也把google web fonts用于許多項目。

注意：

如果檢視前面的連結位置，可以看到google的@font-face定義已經為我們完成了。确切地講，其定義如下：

既然我的代碼知道在哪裡尋找字型，我們就隻需引用它即可：

圖6.4顯示了使用web字型的新履歷。