Google Fonts教學 | 網頁設計

4.9.16

Google Fonts教學
此篇以設定「思源黑體」作示範,其他 Google Web Fonts 也是類似設置。


「思源黑體」是 Google 和 Adobe 合作製作的開源字型,可到 Google Noto Fonts 看實際效果。也可下載到電腦安裝使用。

由於「思源黑體」繁體中文版尚未正式被納入Google Fonts,需要在 Google Fonts : Early Access 中尋找 Noto Sans TC

可在CSS中直接貼上連結匯入:
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

其實notosanstc.css就是以下:


如果不會用到全部的粗度,建議直接貼上會用到的font-weight部分就好,可節省載入時間。

AC選擇font-weight 300及500,分別作為一般及粗體字型:


貼上自訂CSS後,修改範本XML中的 font-family
font-family: 'Noto Sans TC', sans-serif;

小貼士:如果想英文字型與中文不相同,須將英文字型放於中文字型前,這樣兩種字型都能顯示。
font-family: sans-serif, 'Noto Sans TC';

儲存範本後完成設定!

Google Fonts : Early Access 還有其他中文字型可選:

上述字型的CSS可直接從下面複製:

cwTeXKai (Chinese Traditional) 楷體

@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);



cwTeXYen (Chinese Traditional) 圓體

@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);



cwTeXFangSong (Chinese Traditional) 仿宋體

@import url(http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);



cwTeXMing (Chinese Traditional) 明體

@import url(http://fonts.googleapis.com/earlyaccess/cwtexming.css);



cwTeXHei (Chinese-traditional) 黑體

@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);



Noto Sans SC (Chinese Simplified) 思源黑體簡體版

@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);


您或許喜歡

2 意見

  1. 相當實用的文章,但我想套用在WordPress裡的Slider Revolution外掛上,卻一直失敗Or2

    回覆刪除
  2. Hi MiKey,很高興可以幫到你。如想在Slider Revolution外掛中使用,你需要做2項設定:

    1. 清除字型選擇
    在 Slide Editor > Style > Font Family 的下拉式選單中,清除已選擇的字型,因為選項中沒有中文字型,而且會override預設設定

    2. 在字元上加上class,用CSS設定字型
    在 Slide Editor > Attributes > Wrapper Classes 中,輸入class name,然後在custom CSS中設定

    希望幫到你:)

    回覆刪除

精選文章

釋放C Drive空間:更改iTunes備份位置 | 電腦技巧 (2018.10.17更新)

最近電腦常警告我儲存空間不足!自問沒有安裝新程式,文件又全都儲存在 D Drive,到底容量都去哪了?終於發現因妹妹備份iPhone的緣故。於是找了解決方法,希望幫到遇上同樣問的的朋友。

Facebook