用Google Font API來豐富網頁字體

Google在5月20日宣佈推出Google Font Directory和Google Font API兩 項服務。在Google Font Directory中，Google聯合了衆多的字體設計者爲用戶提供了多種漂亮的字體，但如今所有是英文字體，相信從此會有中文字體。Google Font API 和Google Font Directory是相輔相成的，用戶正是經過Google Font API來使用Google Font Directory中的字體。

如何使用Google Font API？

進入Google Font Directory選擇合適的字體。點擊選擇的字體能夠查看它在各類大小下的顯示效果。

因爲這些字體在本地系統中不存在，因此必須在頁面中引用它們的字體文件。這些文件託管在Google的雲中，引用它們經過下面的方式。

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

使用字體經過將html節點的font-family樣式設置爲上面引用的字體。

h1 { font-family: 'Reenie Beanie', arial, serif; }

Google Font API的實現得益於瀏覽器可加載服務器端字體文件的功能。這一功能的使用是經過在樣式中定義@font-face屬性，關於該屬性的說明以下：

@font-face 可以加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。【微軟的IE 5已是開始支持這個屬性，可是隻支持微軟自有的.eot (Embedded Open Type) 格式，而其餘瀏覽器直到如今都沒有支持這一字體格式。然而，從Safari 3.1開始，網頁重構工程師已經能夠設置.ttf(TrueType)和.otf(OpenType)兩種字體作爲自定義字體了。】

Google Font API中加載的正是Google開放字體目錄中的字體文件，拿Reenie Beanie字體來講，Google定義的方式以下：

@font-face {
  font-family: 'Reenie Beanie';
  src: url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0');
}

上面代碼中，font-family屬性是定義字體的名稱，以便隨後的樣式中使用該字體，src屬性則用來定義字體文件的路徑，直接在瀏覽器訪問該屬性值就能夠下載到該字體文件。

因爲各瀏覽器支持的字體文件格式不一，Google會根據瀏覽器的類型，提供不一樣格式的字體文件，我分別使用過IE和Firefox進行測試過，IE下載到的是eot文件，firefox則會下載到ttf文件。

關於各字體文件格式的兼容性說明以下：

.eot格式

.ttf格式