使用wordpress的好處之一,就是有很多佈景主題可以讓我們套用,只是這些主題多半都是外國人所設計,對於中文字體的支援沒有那麼理想。在網路上搜尋免費中文字體字型,可以查到一些解決方案,例如採用線上字型服務justfontTypekit,不過通常會有流量的限制,超過額度就需要付費。如果不想要那麼麻煩,也可以直接使用「微軟正黑體」,我個人認為還滿漂亮的拉,不過對於沒有該字體的裝置,就發揮不出效果。因此,跟大家分享Google Web Fonts,他沒有流量或次數限制,只要加幾行程式碼就完成設定了,非常簡單!


設定步驟

由於思源黑體目前算是測試版本,所以我們進入Google Fonts Early Access頁面

Google Fonts: Early Access:https://www.google.com/fonts/earlyaccess

在Google fonts的頁面中,搜尋中文的字體(Chinese Traditional),會看到有提供6種中文字體,分別為:

  • 仿宋體 cwTeXFangSong (Chinese Traditional)
  • 黑體 cwTeXHei (Chinese-traditional)
  • 楷體 cwTeXKai (Chinese Traditional)
  • 明體 cwTeXMing (Chinese Traditional)
  • 圓體 cwTeXYen (Chinese Traditional)
  • 思源黑體 Noto Sans TC (Chinese Traditional)

網頁上就有安裝步驟了,加入一行css import,接著在標籤中加入font-family

fonts

這裡我使用 Jetpack的CSS 樣式編輯器,將思源黑體加進佈景主題中!

編輯CSS檔案很多方式,可以直接修改原始碼,或是安裝修改CSS的外掛(例如 Jetpack的CSS 樣式編輯器)。不過還是建議透過外掛做全局的修改比較好,因為通常我們會套用別人的佈景主題,一旦主題釋出更新,舊的CSS檔案會被覆寫,如果更動的地方很多,那每次都要做修改會很麻煩。

螢幕截圖 2016-05-11 14.17.39

可以依據想要更換字型的標籤做添加,如果要將所有都換掉,可以參考原本的CSS檔案,將h1,h2,h3…等等一拖拉庫的標籤都加上新的font-family,就可以覆寫過去囉~

不過 Jetpack目前似乎有個小bug,將import貼進去後,他會轉為string,但當你再更新一次時,又會在string兩邊加個雙引號,因此每次更新都要做修改,以免設定無效。

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import  'http://fonts.googleapis.com/earlyaccess/notosanstc.css';
@import  ""http://fonts.googleapis.com/earlyaccess/notosanstc.css"";

原先應該是第一行,設定完成會變第二行,如果再更新一次會變成第三行


參考資料

GOOGLE FONTS – 如何為佈景主題新增中文字型

Google Fonts 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果