Thursday, July 15, 2010

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!!

No comments:

Post a Comment