探秘Google Font API：你會立刻愛上它
原創【51CTO譯文】Web字體設計的發展可以說是突飛猛進，除了目前主流的SiFR、Cufon、Typekit、@font-face等技術外，Google在不久前也推出了自己的Google Font API服務，下面讓我們來看看什么是Google Font API，以及我們如何將它應用到Web設計中。
如何用它來工作？只需一步即可
我們充分利用Google Font API的優勢，在不到15秒的時間內，就能引用到我們想要的個性化字體，你會立刻發現：你已經愛上它了。舉個例子：
- view plaincopy to clipboardprint?
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>untitled</title>
- <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
- <style>
- body { font-family: 'Yanone Kaffeesatz', serif; font-size: 100px; }
- </style>
- </head>
- <body>
- Hello World
- </body>
- </html>
通過上面的例子，我們看到Google Font API有著靈活、快捷的特性，同時我們也可以借助CSS 3中@font-face。當您在網站上插入一段Google代碼時，Fonts API會在您選擇的字體中，返回一個帶有@font-face規則的樣式表。舉個例子：
- @font-face {
- font-family: 'Reenie Beanie';
- font-style: normal;
- font-weight: normal;
- src: local('Reenie Beanie'),
- url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0')
- format('truetype');
- }
我是如何使用Google Fonts API
在瀏覽器中打開Goggle字體庫，如上圖所示。選擇你需要的字體，我這里選擇的是IM Fell DW Pica SC。
點擊后你會得到下面的代碼，以及相關的CSS樣式表：
- <title>Custom Fonts using Google Fonts API</title>
- <link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC' rel='stylesheet' type='text/css'>
- </head>
將這些代碼粘貼到“head”中：
- h2 {
- font-family: "IM Fell DW Pica SC", Georgia, Serif;
- }
***，在你的CSS樣式表里，添加相關字體的名稱。
#p#
Google Font API的優勢
Google Font API是一種能夠簡單的自定義Web字體的解決方案，只需要一段代碼，你就可以Google字體庫里導入你所需的Web字體。Google Font API能夠在絕對大多數的瀏覽器中使用，在Google字體庫里也有很多時尚和個性化的字體供你選擇，并且由于是開源字庫，所以不管是商業或者個人，Google Font API都適用。
Google Font API并不依賴于JavaScript，因此即使用戶禁用了JavaScript，Google字體依然可以顯示。Google字體在CSS 3中的表現同樣出色，任何額外的樣式都可以被添加，比如CSS 3中的text-shadow屬性。
Google Font API的局限性
◆盡管在Google字體庫里有一些字體是不錯的選擇，但這種選擇有相當有限的。
◆絕大多數瀏覽器在字體渲染前，就會加載剩余的頁面，這可能會留下一個空白。
◆Google Font API并不支持移動瀏覽器，例如在iPhone、iPad或者Android里并不適用。
【編輯推薦】
