Google Font API

怕找不到字型嗎？有Google Font API就ok了!!


這篇為您介紹有簡單也很好用的Font API



字型庫：http://www.google.com/webfonts?subset=latin


教學：http://code.google.com/intl/zh-TW/apis/webfonts/docs/getting_started.html#Quick_Start


說明：


要加入字型很簡單，只要跟著下列步驟就可以了
1、在head中掛入

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

2、在css樣式中叫出該字型

CSS selector {
  font-family: 'Font Name', serif;
}

3、或是直接引用

<div style="font-family: 'Font Name', serif;">Your text</div>

改變文字請先參考文字庫，如下圖：

在字型庫中會看到很多字型，點選字型會得到下面那張圖的狀況

Font API parameter name 後面的文字就是要掛在Link 的 css?family= 後面的

而且一次可以載入多個：

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

用 " | "來分格，"+"是用來連結不是單一文字的字型


而且字型還能再做變化：

Style	Specifiers
斜體	italic or i
粗體	bold or b or a numerical weight such as 700
粗斜體	bolditalic or bi

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold

http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b

http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

這樣應該覺得夠Cool了吧!!


廢話不多說，用實作比較快!!

直接開啟檔案，新增一行文字

加入Link，有看到我直接加入二個不同字型了，而且後面都加入粗體和斜體，再用css呈現

原來的字型

改變後的字型

您可以依自己所需要的加入字型，但現在的缺點是字型只有外國字型，中文字型並沒有!!

參考文獻：Google Code