探秘Google Font API：你會立刻愛上它
原創(chuàng)【51CTO譯文】Web字體設(shè)計的發(fā)展可以說是突飛猛進，除了目前主流的SiFR、Cufon、Typekit、@font-face等技術(shù)外，Google在不久前也推出了自己的Google Font API服務(wù)，下面讓我們來看看什么是Google Font API，以及我們?nèi)绾螌⑺鼞?yīng)用到Web設(shè)計中。
如何用它來工作？只需一步即可
我們充分利用Google Font API的優(yōu)勢，在不到15秒的時間內(nèi)，就能引用到我們想要的個性化字體，你會立刻發(fā)現(xiàn)：你已經(jīng)愛上它了。舉個例子：
- 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。當(dāng)您在網(wǎng)站上插入一段Google代碼時，F(xiàn)onts API會在您選擇的字體中，返回一個帶有@font-face規(guī)則的樣式表。舉個例子：
- @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。
點擊后你會得到下面的代碼，以及相關(guān)的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樣式表里，添加相關(guān)字體的名稱。
#p#
Google Font API的優(yōu)勢
Google Font API是一種能夠簡單的自定義Web字體的解決方案，只需要一段代碼，你就可以Google字體庫里導(dǎo)入你所需的Web字體。Google Font API能夠在絕對大多數(shù)的瀏覽器中使用，在Google字體庫里也有很多時尚和個性化的字體供你選擇，并且由于是開源字庫，所以不管是商業(yè)或者個人，Google Font API都適用。
Google Font API并不依賴于JavaScript，因此即使用戶禁用了JavaScript，Google字體依然可以顯示。Google字體在CSS 3中的表現(xiàn)同樣出色，任何額外的樣式都可以被添加，比如CSS 3中的text-shadow屬性。
Google Font API的局限性
◆盡管在Google字體庫里有一些字體是不錯的選擇，但這種選擇有相當(dāng)有限的。
◆絕大多數(shù)瀏覽器在字體渲染前，就會加載剩余的頁面，這可能會留下一個空白。
◆Google Font API并不支持移動瀏覽器，例如在iPhone、iPad或者Android里并不適用。
【編輯推薦】
