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. 由於中文字型的檔案比較大,載入的速度會與您的網路頻寬有關,需要花一點時間下載。

延伸閱讀

3 thoughts on “Google Fonts 提供五種中文 Webfont,早起的鳥兒有的玩

發表意見