還在等待 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 (維基百科的英文說明)
- 開放字型授權
文章標題裡 Wenfont 錯了一個字母
謝謝你^____^
我想請問您說,放在head 的 style 標籤裡就可以了...請問我在wordpress應該到哪裡去找這個head的style?...謝謝!
要到Wordpress的Themes裡改。