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

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

<script type="text/javascript" src="https://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="https://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="https://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="https://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(https://fonts.googleapis.com/css?family=字型名稱);
</style>

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

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

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

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

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

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

Written by 

城市裡的小小迷僮工程師,喜歡用鍵盤記錄個人生活的點滴,身邊的人事物都我的靈感,用心踏出每個腳步,用文字灌溉《海芋小站》,用專業解決問題。

發表迴響