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

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

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

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

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

  1. WebFont.load(
  2. google: {
  3.       families: [ 'Tangerine', 'Cantarell' ]
  4.    }
  5. });

到此,我們已經可以寫入一個簡單的程式了!以下為一個簡單的範例程式:

  1. <html>
    
  2.  <head>
    
  3.  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    
  4.  </script>
    
  5.  <script type="text/javascript">
    
  6.  WebFont.load({
    
  7.  google: {
    
  8.  families: [ 'Tangerine', 'Cantarell' ]
    
  9.  }
    
  10.  });
    
  11.  </script>
    
  12.  </head>
    
  13.  <body>
    
  14.  <h1>Hello World!</h1>
    
  15.  </body>
    
  16. </html>

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

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

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

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

  1. <html>
    
  2.  <head>
    
  3.  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    
  4.  </script>
    
  5.  <script type="text/javascript">
    
  6.  WebFont.load({
    
  7.  google: {
    
  8.  families: [ 'Tangerine', 'Cantarell' ]
    
  9.  }
    
  10.  });
    
  11.  </script>
    
  12.  
  13.  <style>
    
  14.     .wf-inactive h1 {
    
  15.     font-family: serif;
    
  16.     }
    
  17.     .wf-active h1 { 
    
  18.     font-family: 'Tangerine', serif;
    
  19.     }
    
  20.  </style>
    
  21.  </head>
    
  22.  <body>
    
  23.  <h1>Hello World!</h1>
    
  24.  </body>
    
  25. </html>

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

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

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

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

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

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

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

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

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

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

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