使用 Google Font Directory 幫你的網站文字添加多種字型變化

字型可以充份表達出一個網站設計者的風格，而許多人往往找不到適合自己的字型而煩惱不已。但現在這個問題可以獲得部份解決，而解決這個方案的正是Google！Google api現在推出了WebFont Loader，也就是說，可以讓你在設計網頁時，動態載入Google所擁有的字型囉！

而它的用法會不會很難呢？其實不會太複雜，只要充份理解Google API即可。我們先看一下一個簡單的範例：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
</script>
<script type="text/javascript">
   WebFont.load({
   google: {
      families: [ 'Tangerine', 'Cantarell' ]
   }
  });
</script>

其中最重要的關鍵很顯然在於以下的程式碼，以後我們如果要擴充程式，也必須擴充以下的區段，而「families」則是載入的字型，如果你要一次載入多個字型，那麼請以「,」來隔開。

WebFont.load(
google: {
      families: [ 'Tangerine', 'Cantarell' ]
   }
});

到此，我們已經可以寫入一個簡單的程式了！以下為一個簡單的範例程式：

<html>
 <head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
 </script>
 <script type="text/javascript">
 WebFont.load({
 google: {
 families: [ 'Tangerine', 'Cantarell' ]
 }
 });
 </script>
 </head>
 <body>
 <h1>Hello World!</h1>
 </body>
</html>

而這個程式碼會變成怎樣呢？其實Google會自動轉換成以下的程式碼：

<html class="wf-cantarell-n4-active wf-tangerine-n4-active wf-active">
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
 </script>
 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Tangerine%7CCantarell">
<script type="text/javascript">
 WebFont.load({
 google: {
 families: [ 'Tangerine', 'Cantarell' ]
 }
 });
 </script>
</head>
<body>
 <h1>Hello World!</h1> 
  </body>
</html>

可以看到Google在html的tag已經幫我自加上了class的屬性值，而這些剛好可以讓我們來控制字型載入前後的變化。也因此，我們必須先了解到「wf-active」和「wf-active」這兩個屬性值的不同。

在Google官方的API文件中說明，「wf-active」是指說字型載入成功，而「wf-inactive」則是字型載入失敗。也就是說，我們可以分別設定字型載入成功或載入失敗時的CSS。也因此，我們改寫原本的程式碼如下：

<html>
 <head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
 </script>
 <script type="text/javascript">
 WebFont.load({
 google: {
 families: [ 'Tangerine', 'Cantarell' ]
 }
 });
 </script>

 <style>
    .wf-inactive h1 {
    font-family: serif;
    }
    .wf-active h1 { 
    font-family: 'Tangerine', serif;
    }
 </style>
 </head>
 <body>
 <h1>Hello World!</h1>
 </body>
</html>

而這段程式碼則是說明了當我們字型載入成功時，Hello World將以「Tangerine」這個字型顯示，反之則是以「serif」這個字型來顯示。

此外，我們也可以控制字體是粗的，斜的，還是正常值，只要在字型後面分別加上參數「b」、「i」、「n」就可以分別代表可用的字型有「粗的」，「斜的」，還是「正常」，而一次要有多種變化，可以使用「,」來隔開，以下為一個小範例。

<script type="text/javascript">
 WebFont.load({
 google: {
 families: [ 'Tangerine:i,b', 'Cantarell' ]
    }
 });
</script>

如果你覺得以上的說明太複雜，看不懂的話，那麼Google也提供了簡單的替代方案，只需要在文章中加上以下的程式碼即可使用字型。

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=字型名稱);
</style>

而如果要使用多個字型，則是以「|」來做分隔，如以下的範例程式碼：

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=字型名稱1|字型名稱2);
</style>

比較討厭而且會遇到的問題是，字型名稱可能有空白，如「Droid Sans」這個字型，這時該怎麼辦呢？沒關係，只要將空白改成「+」即可。如以下的程式碼：

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
</style>

最後，別忘了上一下「Google Font Directory」，並且看看有那些字型可以使用喔！

至於詳細情形，可以參考「Google Font API」，裡面有很詳細的解說。

使用 Google Font Directory 幫你的網站文字添加多種字型變化

搜尋

好站連結