2010年5月29日 星期六

美化網頁的字型-Google Font

以往網頁文字為了避免網頁瀏覽者的電腦沒有相對應的字型,所以通常在設計上都使用預設的字型,諸如Arial、Time Romance、...,非常單調,若想要用別的字型來呈現,通常必須用圖片來取代,但這又會增加網頁的下載時間...。所以設計跟瀏覽速度總是魚與熊掌難以得兼。
不過,現在有新的解決方案了!!
那就是「Google Font」─ Google大神提供字型供我們使用。
高手們可直接前往Google Font API官方說明頁,中低手們就請勉強看看小弟的介紹吧
  1. 匯入Google字型載入程式
    在網頁<head>...</head>之間加入下面的程式碼
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    </script>
    
  2. Google Font Directory中找到你想要的字型,如下圖所示:
    以Cantarell為例

    取得程式碼:

    複製要內嵌的程式碼

  3. 接著匯入Google Font
    在網頁<head>...</head>之間加入下面的程式碼後,把剛剛複製來的程式碼貼在後面
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Cantarell' ]
        }
      });
    </script>
    <link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
  4. 開始使用字型
    舉例來說,我想把自行套用在標題字h1,只要在CSS檔中放入以下程式碼即可
    h1 { font-family: 'Cantarell', arial, serif; }