此篇以設定「思源黑體」作示範,其他 Google Web Fonts 也是類似設置。
「思源黑體」是 Google 和 Adobe 合作製作的開源字型,可到 Google Noto Fonts 看實際效果。也可下載到電腦安裝使用。
「思源黑體」繁體中文版 Noto Sans TC 已正式被納入Google Fonts,可按 Download family
下載。
選擇粗度後(如以 font-weight
300及500 作為一般及粗體字型,粗度變化越少,載入時間越快),可在 header 的HTML源代碼中直接貼上連結匯入:
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500&display=swap" rel="stylesheet">
然後修改CSS中的 font-family
。
font-family: 'Noto Sans TC', sans-serif;
小貼士:如果想英文字型與中文不相同,須將英文字型放於中文字型前,這樣兩種字型都能顯示。
font-family: sans-serif, 'Noto Sans TC';
儲存範本後完成設定!
Google Fonts : Early Access 還有其他中文字型可選:
- cwTeXKai (Chinese Traditional) 楷體
- cwTeXYen (Chinese Traditional) 圓體
- cwTeXFangSong (Chinese Traditional) 仿宋體
- cwTeXMing (Chinese Traditional) 明體
- cwTeXHei (Chinese-traditional) 黑體
- Noto Sans SC (Chinese Simplified) 思源黑體簡體版(已正式推出)
上述字型的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) 思源黑體簡體版
<!-- To embed a font, copy the code into the <head> of your html -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;500&display=swap" rel="stylesheet">
<!-- CSS rules to specify families -->
font-family: 'Noto Sans SC', sans-serif;
相當實用的文章,但我想套用在WordPress裡的Slider Revolution外掛上,卻一直失敗Or2
Hi Mikey,很高興可以幫到你。如想在Slider Revolution外掛中使用,你需要做2項設定:
1. 清除字型選擇
在 Slide Editor > Style > Font Family 的下拉式選單中,清除已選擇的字型,因為選項中沒有中文字型,而且會override預設設定
2. 在字元上加上class,用CSS設定字型
在 Slide Editor > Attributes > Wrapper Classes 中,輸入class name,然後在custom CSS中設定
希望幫到你:)