Google Fonts 提供五種中文 Webfont，早起的鳥兒有的玩

還在等待 Google 思源黑體的 Webfonts 嗎？現在 Google Fonts 早鳥頁開始提供黑體、仿宋、明體、楷體及圓體等五種中文 Webfonts 供大家測試使用。剛試了一下，基本的顯示沒什麼問題，行動設備的顯示非常優秀 (黑體)，線條銳利清晰，桌面端則還有在優化的空間；但黑體字的部分，看起來似乎不是大家期待已久的思源黑體，也許 Google 還有其他的考量。由於目前中文的 Webfont 只是測試階段，使用上還有一些小問題，像是粗體的時候，部分文字會出現簍空的情況，現階段不建議用在正式的網頁裡，比較適合想嘗鮮的朋友玩看看。

動手做看看

由於是 Webfont 的關係，Google 其實已經把相關語法準備好，你只要到 Google Fonts 的早鳥頁 (最下面) 挑選你喜歡的字型，並把 Webfont 的 CSS 載入即可，我們以黑體為例實際來玩看看。

將下面的內容放在 head 的 style 標籤裡

@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format('truetype');
}

在你要引用黑體的地方加上

font-family: 'cwTeXHei', serif;

完成。

看看效果如何：

PS. 由於中文字型的檔案比較大，載入的速度會與您的網路頻寬有關，需要花一點時間下載。

• 黑體
• 仿宋體
• 楷體
• 明體
• 圓體

延伸閱讀

• 燒喔！Webfont 版的思源黑體早鳥試用
• Google Fonts: Early Access
• 下載 cwtexhei.ttf。黑體 (.TTF 離線使用)
• 下載 cwTeXFangSong-zhonly.ttf。仿宋體 (.TTF 離線使用)
• 下載 cwTeXKai-zhonly.ttf。楷體 (.TTF 離線使用)
• 下載 cwTeXFangSong-zhonly.ttf。明體 (.TTF 離線使用)
• 下載 cwTeXYen-zhonly.ttf。圓體 (.TTF 離線使用)
• OPEN FONT LICENSE (維基百科的英文說明)
• 開放字型授權