分類
網站開發

Google Fonts教學

使用Google Fonts須知,包括Early Access教學,如何設定中文及英文字型。

此篇以設定「思源黑體」作示範,其他 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 還有其他中文字型可選:

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

cwTeXKai (Chinese Traditional) 楷體

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

cwTeXYen (Chinese Traditional) 圓體

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

cwTeXFangSong (Chinese Traditional) 仿宋體

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

cwTeXMing (Chinese Traditional) 明體

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

cwTeXHei (Chinese-traditional) 黑體

@import url(https://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;

2 replies on “Google Fonts教學”

相當實用的文章,但我想套用在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中設定

希望幫到你:)

發表回覆

你的電郵地址並不會被公開。 必要欄位標記為 *

本網站受 reCAPTCHA 保護,並適用 Google 隱私政策服務條款