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

延伸閱讀

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

  1. 回覆

    […] 先前我們介紹 Google Fonts 早鳥方案的時有提到五套中文的 Webfont,當時還有點遺憾裡面沒有大家注意許久的思源黑體,畢竟一組標準的思源黑體就有 15-16mb 大,如果還要考量提供不同粗細的字體時,光字型可能就要佔去 40-50mb,以目前網路的速度來說的確有點過大,加上網站行動版本佔整體流量的比重越來越多,40-50mb 的下載量對行動網頁會是很大的負擔。畢竟不是每一位使用者的手機都採用不限流量的網路方案,字型大小與網路流量兩者勢必要做一些取捨。 所以當聽到 Google 把思源黑體的自行做成 Webfont 後,第一個反應就是去抓 CSS 檔的字型路徑,把該字型下載回來,看看他的檔案大小與標準版的思源黑體是否相似。慶幸的是,Google 顯然有注意到這點,Webfont 版的思源黑體只有約 2.5mb,再搭配一兩組粗體字,總共也不到 10mb,比一組標準版的思源黑體都小。以我自己實驗的結果來說,第一次下載使用,大約需要等 5 到 10 秒 (看網路情況) 頁面才會全部轉成思源黑體。至於這樣的速度如何?能不能使用在正式的網站上,就由勞各位看官自行判斷。 […]

  2. 回覆
    jk - 2016-10-27

    文章標題裡 Wenfont 錯了一個字母

    1. 回覆
      ossian - 2016-11-22

      謝謝你^____^

  3. 回覆
    艾莉 - 2017-05-24

    我想請問您說,放在head 的 style 標籤裡就可以了…請問我在wordpress應該到哪裡去找這個head的style?…謝謝!

    1. 回覆
      ossian - 2017-05-24

      要到Wordpress的Themes裡改。

你的觀點