Google Font API ，Google字型服務

日前在友人Sobi的告知下，知道了Google有推出了這個有趣的字型服務，可以讓你在網頁上也可以使用各種美觀的字體，雖然現在只有英文的字體，不過還是相當方便的。

先來相關連結
Google Font API介紹
Google Font API教學
Google Font API可選字型

使用上很簡單，要加入一個字型，就在Head內加入這行

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=字型名稱">

如果那個字型名稱中有空白的話，就使用+去連結，像我下面的範例就用引用了下列三個字型。

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

套用字型時，有兩個方法，一個是先設好css然後再將文字套上CSS，我就是用這個做法，範例如下

.g_font_1 {
font-family: 'Tangerine', serif;
}
.g_font_2 {
font-family: 'Reenie Beanie', arial, serif;
}
.g_font_3 {
font-family: 'Inconsolata', arial, serif;
}

另一個方式則是在需套用時在指定要用哪個字型，範例如下

<div style="font-family: '字型名稱', serif;">Your text</div>

最後，列出套用三種字型後的效果。

Google Font Test with Tangerine Font!!

Google Font Test with Reenie Beanie Font!!

Google Font Test with Inconsolata Font!!