Fork me on GitHub

Programming Design Notes

Google Font API 和 Google Font Directory 初體驗

| Comments

在制作網頁時,我們大多數都會選擇一些標準字體,例如: Arial, Times New RomanVerdana 等等,如果想用某些不常見的字體時,會很麻煩。雖然 CSS 提供了 font-face 這一個選項去載入字體,但每一個瀏覽器所支援的字體格式又不一樣,而且 CSS 的寫法也有分別,可能在同一個字體需要幾種不同格式和幾個 CSS file,因為不能確保對方的瀏覽器一定看到自己定義的字體,萬一連字也顯示不到就麻煩了,所以盡可能都不去改成非標準的字體款式。

Google Code 提供了一個新的服務,就是 Google Font API。雖然現在還是測試階段,但照我所見在幾款不同的瀏覽器上也沒有出現問題,Google 替我們做好了最麻煩的瀏覽器設定,令我們可以安心去選擇漂亮的字體去美化頁面( 我的部落格標題也是使用 Google Font API 去改變字體的 )。Google 一共提供了 18 款不同字體,見下圖:


Google Font API 這個服務是和 Typekit 合作的,Typekit 提供了比 Google 更多的字體選擇,可以免費試用,但有很多限制,而 Google 的是免費又可以自由使用。如果覺得 Google 的字體不能滿足你,你便選擇用 TypekitFonts.com吧。

Google 提供了 2 種方式去載入字體,一種是使用載入外部 CSS 的方式去載入字體,另一種則是使用 Javascript 去載入字體。

我先講解使用載入外部 CSS 的方式,這比較簡單。
假設我要載入一款 Cantarell 字體,你要加入以下的 HTMLhead 內:
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css' />

或用以下方式去式去載入字體:
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Cantarell);
</style>

可以將以下的 CSS 放到你的 CSS 檔案內也可以:
@import url(http://fonts.googleapis.com/css?family=Cantarell);/* Load Cantarell font */

http://fonts.googleapis.com/css 這個地址是不會變的,而在後面 family 的參數輸入字體名稱就可以了。
如果要使用 Cantarell 這個字體:
p { font-family: 'Cantarell', arial, serif; }

最好在後面加入一些標準字體,就算萬一這個字體載入失敗,也有一些字體怍後補,不至於由瀏覽器去決定字體。
以下是這個字體的樣子:

Cantarell

如果需要用到普通字款斜體字粗體字粗斜體字,可以用以下方式一次載入這幾款字款:
<link href=' http://fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>

只需在字型名稱後面加上 : ,然後再輸入字款並以 , 去分隔開不同字款就可以了,如果沒有加入任何字款,預設是會載入 regular 字款的。

  • regular - 是最普通最常用的字款 (簡寫是 r)
  • italic - 是斜體字款 (簡寫是 i)
  • bold - 是粗體字款 (簡寫是 b)
  • bolditalic - 是粗斜體字款 (簡寫是 bi)

使用簡寫載入字體:
<link href=' http://fonts.googleapis.com/css?family=Cantarell:r,i,b,bi' rel='stylesheet' type='text/css'>

Cantarell 普通字款:
p { font-family: 'Cantarell', arial, serif; }
Cantarell

Cantarell 斜體字款:
p { 
font-family: 'Cantarell', arial, serif;
font-style:italic;
}
Cantarell

Cantarell 粗體字款:
p { 
font-family: 'Cantarell', arial, serif;
font-weight:bold;
}
Cantarell

Cantarell 粗斜體字款:
p { 
font-family: 'Cantarell', arial, serif;
font-weight:bold;
font-style:italic;
}
Cantarell

Cantarell 加入一些效果:
p { 
font-family: 'Cantarell', arial, serif;
text-shadow: 4px 4px 4px #aaa;
}
Cantarell

如果字體名稱是由 2 個字以上組成,中間用空格分隔開了,那可以將空格變成 + 去載入字體:
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css' />

@import url(http://fonts.googleapis.com/css?family=Reenie+Beanie);

你亦可以一次載入多款字體:
<link href='http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans' rel='stylesheet' type='text/css' />

@import url(http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans);

字體和字體之間使用 | 去分隔開,如果要載入多款字體共要每款字體有不同字款也可以:

<link href='http://fonts.googleapis.com/css?family=Tangerine:r,i|Inconsolata:b,bi|Droid+Sans:i,bi' rel='stylesheet' type='text/css' />

@import url(http://fonts.googleapis.com/css?family=Tangerine:r,i|Inconsolata:b,bi|Droid+Sans:i,bi);

使用 Javascript 的方式去載入字體:
<script type="text/javascript">
WebFontConfig = {
google: {
families: ['Tangerine', 'Cantarell']
}
};
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

使用非同步的方式去載入 Javascript 後再載入字體:
<script type="text/javascript">
WebFontConfig = {
google: {
families: ['Tangerine', 'Cantarell']
}
};
(function(){
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>

使用非同步的方式去載入會先看見預設字體,等待 Javascript 載入完畢後才會看見你想要的字體,而第一種方式沒有這個問題。

亦可以選擇用 Google AJAX APIs 去載入字體:
<script type="text/javascript">
google.load("webfont", "1");

google.setOnLoadCallback(function(){
WebFont.load({
google: {
families: ['Tangerine', 'Cantarell']
}
});
});
</script>

使用 Google AJAX APIs 去載入字體一樣會有非同步的問題。

使用 Javascript 去載入 2 個字名稱以上的字體:
WebFontConfig = {
google: {
families: ['Tangerine', 'Cantarell', 'Droid Serif']
}
};

使用 Javascript 去載入不同字款:
WebFontConfig = {
google: {
families: ['Tangerine', 'Cantarell:r,i,b,bi', 'Droid Serif:italic']
}
};

所有 Google 提供的字體: Google Font Directory
Google API Reference: Google Font API

相關書籍: Mining Google Web Services: Building Applications with the Google APIProfessional Web APIs with PHP: eBay, Google, Paypal, Amazon, FedEx plus Web FeedsGoogle Hacks: Tips & Tools for Finding and Using the World's Information