Programming Design Notes

在制作網頁時，我們大多數都會選擇一些標準字體，例如: Arial, Times New Roman 和 Verdana 等等，如果想用某些不常見的字體時，會很麻煩。雖然 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 的字體不能滿足你，你便選擇用 Typekit 或 Fonts.com吧。

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

我先講解使用載入外部 CSS 的方式，這比較簡單。
假設我要載入一款 Cantarell 字體，你要加入以下的 HTML 在 head 內:

<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; }

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


如果需要用到普通字款、斜體字、粗體字和粗斜體字，可以用以下方式一次載入這幾款字款:

<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 斜體字款:

p { 
    font-family: 'Cantarell', arial, serif; 
    font-style:italic; 
}

Cantarell 粗體字款:

p { 
    font-family: 'Cantarell', arial, serif; 
    font-weight:bold; 
}

Cantarell 粗斜體字款:

p { 
    font-family: 'Cantarell', arial, serif; 
    font-weight:bold; 
    font-style:italic;
}

替 Cantarell 加入一些效果:

p { 
    font-family: 'Cantarell', arial, serif;
    text-shadow: 4px 4px 4px #aaa; 
}

如果字體名稱是由 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

相關書籍: