盡管互聯網上新的技術和項目層出不窮,但是在過去的一段時間裡我們卻缺乏豐富而漂亮的互聯網字體。雖然傳統的字體選擇也非常多,但是大多數電腦中安裝並支持的卻是一些非常固定的字體,隨著互聯網設計的發展,傳統字體已經不能滿足需求。
谷歌字體API的訪問
谷歌引入了谷歌字體目錄和字體API,這是一個免費的web服務,它允許站長能夠輕松、便捷、有效地使用各種個性化字體。作為字體服務(主要有TypeKit, Typotheque)行業的新生力量,相信大家都很想挖掘谷歌字體API的潛力吧?那麼就通過這篇文章深入挖掘它的魅力。
谷歌字體API為何物?
大家都經常上網,你們是否有看到過一些網站或博客上使用的非標准字體呢?所謂非標准字體是指除了互聯網安全字體,如Arial, Helvetica, Verdana, Georgia, Times New Roman之外的其他所有字體。
谷歌字體API就是一個支持高質量的開源字體文件的服務,你可以輕而易舉地在自己的網站設計中使用這些字體。該字體庫還會不斷發展,將會有越來越多的字體類型可供你選折。
使用谷歌字體API的好處
可繼續使用HTML文本
與使用圖片或CSS背景圖片不同,使用@font-face方案來美化web排版對 搜索引擎更加友好。
此外,它屬於不冒犯性的解決方案,意味著說你不需要對現有的任何內容進行修改,只需要更新 CSS樣式即可。
可通過互聯網訪問
由於你使用 HTML文本而不是一個圖片或CSS背景,因此並不影響通過屏幕閱讀的用戶。
減輕你的服務器負擔
使用@font-face字體,你可將服務器負擔轉到谷歌安全可靠的CDN設備中,減輕了你自己服務器的工作量,而通過谷歌服務器你完全可以不必擔心這些字體文件的加載速度。
如何使用谷歌字體API
使用谷歌字體API非常簡單,你無需成為一個互聯網開發的代碼高手。你只需在你的網頁中從谷歌那裡鏈接一個CSS式樣文件並在自己的CSS定義中引用字體名即可。
遺憾的是它目前不支持中文!
下面是使用谷歌字體API的基本過程:
第一步: 添加所需字體的樣式鏈接
你可以查看字體庫來查看可用字體。在你的網站上加入某種字體的基本格式是這樣的:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
第二步: 使用該字體給HTML元素定義式樣
下面的例子,是通過使用 font-family CSS屬性給《h1》元素分配一個叫做“ Font Name” 的字體。
h1 {
font-family: 'Font Name', serif;
}
如果你只需使用該字體一次,你可以使用內聯樣式:
<p style="font-family: 'Font Name', serif" >Six Revisions Is Beautiful</p>
第三步: 始終有個備份方案
上面的代碼你可能也發現了我使用了serif 來作為後備的字體,這樣做是為了以防萬一。 也就是說萬一谷歌的服務器出現什麼狀況,浏覽器將會使用默認的Serif字體。 建議在使用font-family 屬性時,無論是否是 @font-face字體,都養成這樣的習慣,這通常叫做字體的堆疊。
使用谷歌字體API的例子
接下來我們來介紹一個例子,請復制並粘貼下面的代碼到一個HTML文件裡並保存,然後通過浏覽器打開它。我建議你在不同的浏覽器上測試HTML文件可能會發現跨浏覽器的差異。這裡使用的字體是 Lobster typeface,你可以使用不同的字體來試驗。
<html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster"> <style>
h1 { font-family: 'Lobster', serif; font-size: 48px; } </style> </head> <body>
<h1>Six Revisions Is Beautiful!<br /><br /> </h1> </body> </html>
效果:
Six Revisions Is Beautiful!
所生成的文本 (“Six Revisions Is Beautiful!”)是普通的 HTML文本,你可以給它添加更多式樣元素,(例子中,只使用到 h1元素)。
請求使用谷歌字體API中的多種字體
我們假設你需要谷歌字體目錄中的三種字體。請不要創建多個請求。創建多個請求會增加一個頁面的HTML請求數量,大家應該都知道 HTTP請求的次數越少,頁面響應時間就越少。
所以我們不使用多個樣式鏈接標簽,而是使用下面的格式。
下面的例子URL請求中,將會一次性加載三種字體(Vollkorn, Yanone和 Droid Sans)。
http://fonts.googleapis.com/css?family=Vollkorn|Yanone|Droid+Sans
這樣你就可以在你的式樣元素中使用這三種字體中的任何一種字體了。
注意事項
字體名稱之間用 | 隔開,並且不留空格,還要注意Droid Sans字體的使用,對於字體名稱中有空格的,需用 + 符號來代替空格,在我們的例子中,我們使用的字體名稱是Droid Sans,因此在申請的鏈接裡應該用“Droid+Sans”。
提示:在一次鏈接請求中使用過多的字體可能會讓你頁面響應時間加長,因此建議只加載必要的字體。雖然說使用這些字體都是免費的,但是也不是說你可以胡來。
谷歌 Font API字體的重量和式樣
互聯網字體有字體重量/式樣( font weight/style)變體,如需使用這些變體,只需在該字體的後面加上冒號(:)以及對應的weight/style即可。
下面的例子,我們請求使用 Vollkorn的粗體、粗斜體以及Inconsolata的斜體。
http://fonts.googleapis.com/css?family=Vollkorn:bold,bolditalic|Inconsolata:italic|Droid+Sans
每種字體的變體也有短代碼(簡碼)可用,它們分別為:
粗體: b
斜體: i
粗斜體: bi
下面就是使用簡碼的例子:
http://fonts.googleapis.com/css?family=Vollkorn:b,bi|Inconsolata:i|Droid+Sans
注意事項
字體後面的冒號與變體名稱(如, bolditalic)或變體名稱的簡碼(如,bi)之間不能有空格,如果需要使用到多種變體,請用(,) 將它們隔開,並且也不留空格。
谷歌字體API讓互聯網設計更加漂亮
互聯網設計行業是一個非常活躍的行業,但是卻受限於一個多年的老問題,字樣。現在終於有了解決方案,你開始使用 @font-face了嗎?