使用 Google Fonts 為網頁新增美觀字型
問題：如果設計中使用了非標準的字型，你該如何去實現
兩種方式：
第一種使用圖片代替 但是肯定是沒有文字效果好，不利於seo
第二種 是用線上的字型 google 大多數網路會被牆，這個時候可以使用的typekit。
http://www.chinaz.com/free/2012/0815/269267.shtml
原文地址：https://www.ibm.com/developerworks/cn/web/1505_zhangyan_googlefont/
線上字型提供豐富多樣的字型樣式，能使頁面更美觀，更具吸引力。Google Fonts 就是一個開源的線上字型庫，使用起來簡單快速。
前言
文字是網頁中很重要的組成部分。為文字選擇一個合適的字型，能夠更好的展現一個網站的個性，表達所要傳遞的資訊，同時吸引使用者來產生興趣。
說到字型，我們首先會想到 CSS 裡面的 font，例如：
<html>
<head>
<style>
p { font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
<body>
<p>some text</p>
</body>
</html>
在這段 HTML 程式碼中為<p>標籤定義了字型，當瀏覽器解析<p>some text</p>標籤時，首先會在系統中查詢 Arial 這個字型，如果找不到，就找 Helvetica 字型，如果還是找不到，就會查詢瀏覽器預設的 sans-serif(非襯線)字型，最後把文字渲染出來。
什麼是安全字型
安全字型這個概念，也許很多人都不是很熟悉，我們先舉個例子：
font-family: Arial, Helvetica, sans-serif;
這個對字型（font-family）的定義就是一個安全字型。每種作業系統都有自己預設安裝的字型，瀏覽器只能正常顯示作業系統中安裝了的字型。而不同的作業系統預設安裝的字型不完全相同，有的甚至名稱都不一樣，在這種情況下，我們必須定義安全字型，使字型在所有的瀏覽器中都能夠正常顯示。
在上面這個 font-family 的定義中，我們選擇 Arial 作為首選字型（注：Arial 字型是最常用的 sans serif 字型，也是 Windows 的預設字型，當字型很小是不容易閱讀），但是，蘋果系統中沒有這個字型，所以我們選擇 Helvetica（和 Arial 很相似）作為第二備選字型，最後我們選擇 sans-serif 作為第三備選字型，如果在一個既沒有 Arial 也沒有 Helvetica 的系統裡，那麼瀏覽器會使用預設的 sans-serif 字型來渲染文字。這樣，我們很大程度上保證了使用不同作業系統的訪問者都能看到相同（至少是類似）的頁面文字。
除了 Arial，常見的安全字型還有：
- Verdana 字型，它是微軟公司的核心字型之一，專門為螢幕顯示而開發的。它的應用廣泛，寬度大而易於閱讀，是顯示器中最清晰的字型。CSS 寫法：font-family: Verdana, Geneva, sans-serif;
- Times New Roman 字型，它是最常用的 serif 字型，是瀏覽器預設的字型。小號字的易讀性也很差。CSS 寫法：font-family: 'Times New Roman', Times, serif;
在網頁開發中，應該儘量使用安全字型，也就是高度通用的字型，這樣，訪問者才能流暢的閱讀網頁的所有內容。
但是，網頁設計師一定不會滿足於使用這些安全字型，如何才能使用漂亮的字型，並能在普通使用者的瀏覽器中被正確的渲染出來？答案是：使用@font-face 方案。
@font-face 標籤簡介
@font-face 被列為了 CSS3 的一項新特性，其實它並不是什麼新鮮技術，它最早出現在 CSS2 的規範定義中，但是在 CSS2.1 中又被刪除，現在被正式列入 CSS3。目前主流的瀏覽器（IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+）都能夠支援這個屬性，所以不用擔心會有瀏覽器相容性問題。
@font-face 允許您在網頁中使用電腦中沒有安裝的字型，完全擺脫安全字型的限制。只需將字型包安裝在伺服器上，當用戶載入網頁時，字型包會自動下載到使用者機器上，保證字型能夠正確渲染。
隨著@font-face 的不斷流行，產生了許多新的字型格式圖示集，稱為網路字型。Google Fonts API 就是基於@font-face 的特性開發的一套優秀的網路字型庫。
網路字型的優點有很多：
- 使用的是真正的文字，而不是圖片，放大和縮小都不會影響渲染效果，使用者體驗好；
- 可以被搜尋引擎辨認；
- 不像圖片每次需要重新生成，新增刪除更方便。
如何使用 Google Fonts API
Google Fonts 提供了超過 600 種的高質量的字型，所有的瀏覽器都相容，無需引入 JavaScript，簡單易用，更重要的是，免費。（雖然，暫時不支援中文字型，因為中文字型庫實在是太大了）。
現在來看下，如何在網頁中使用 Google Fonts。
挑選字型
圖 1.Google Fonts 主頁
在主頁中，您可以直接瀏覽所有的字型，可以按單個詞語來檢視，或者按句子段落來檢視整體效果，還可以調整字型大小。如果您對字型分類比較熟悉，就可以使用左邊的搜尋條件對字型作篩選。找到您喜歡的字型之後，點選"Add to Collection"按鈕，然後在網頁下方的"Collection"中即可找到您新增的所有字型。
使用選中的字型來測試您的文字
在上一頁面（圖 1）的"Collection"中，點選"review"。在預覽頁面中（圖 2），輸入您的測試文字，來檢視效果。另外在"review"頁面上，您還可以調整其它的與字型相關的樣式，比如字型大小，間隔，變換，等等。在圖 2 中，我們選擇測試的是"Condiment"字型
圖 2.Google Fonts 預覽頁面
在您的網頁中新增字型連結。
如果確認使用該字型， 在網頁下方的"Collection"中，點選"Use"按鈕，在接下來的頁面中，您將看到詳細的說明，包括字型連結和如何將字型新增到您的網頁中。
有三種方式來新增字型連結：
-
Standard 方式：
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Condiment'>
-
@import 方式：
@import url(http://fonts.googleapis.com/css?family=Condiment);
-
JavaScript 方式：
（通過新增動態指令碼並執行來匯入字型，程式碼省略）
下一步定義在那個標籤上使用該字型，例如：在<class="myheader">標籤上使用，
.myheader {font-family: 'Condiment', cursive;}
大功告成，您現在可以開啟您的網頁欣賞一下了(圖 3)。
圖 3.測試頁面效果
清單 1.測試頁面程式碼
<html>
<head>
<link rel="stylesheet" type="text/css"
href='http://fonts.googleapis.com/css?family=Condiment'>
<style>
.myheader {
font-family: Condiment, cursive;
font-size: 48px;
text-align: center;
}
</style>
</head>
<body>
<div class="myheader"> Test my own text !</div>
</body>
</html>
優化字型包載入
如果您不是大範圍的在網頁中使用 Google 字型，只是在標題或 logo 裡使用，那麼可以在 url 裡新增 text 引數，來限制載入的字型包的大小，最高能縮減 90%左右的大小，以此來節約下載流量。例如：http://fonts.googleapis.com/css?family= Condiment'&text=Hello
這樣，您只會下載 h，e，l，o 這四個字母的字型，大大縮小了字型包的大小。
下載字型包
您還可以把字型包下載並安裝到本地，這樣您就可以在本地使用這些字型，比如在 Notepad，Microsoft Office 裡。
方法為：在圖 3 中，點選下載按鈕
， 選擇"Download the font families
in your Collection as a zip file"
高階應用 API
Google Fonts 還開放了一些介面（稱為 Developer API），用於獲取字型庫的資訊資料。
比如實時獲取字型庫實際可用的字型及其相關資訊：
這個請求的返回結果是一個 JSON 型別的資料，包括了每種字型的名稱，樣式種類（比如 regular，italic），版本，修改時間，包含的樣式包的請求地址，等等。
請注意，在 URL 裡面有一個 key，這個 key 是和您的 web 應用工程相聯絡的，只有註冊過的 web 應用才能成功呼叫 Developer API。我們必須要在 Google Cloud Console 註冊之後，才能獲取這個 key。
關於這個 Developer API， 可以參閱這個連結。
結束語
Google Fonts 很強大，但是也碰到一些載入的問題，最好還是字型宣告的時候，在最後新增一個安全字型，來保證萬無一失。另外的一個建議是，在網頁中要適量的使用花樣的字型，讓整個頁面保持乾淨簡潔。