Google Fonts教學

2016-09-04 2

Web Fonts 雲端字型 Google Fonts教學

此篇以設定「思源黑體」作示範,其他 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(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;
免費按讚支持創作

喜歡我的文章,請在下面按讚 5 下,助我得到 LikeCoin 獎賞,支持我繼續創作免費內容。

行有餘力,可以成為我的讚賞公民,每月送我一杯咖啡,從此每份贊助,都會化成實質支持。

作者簡介

香港斜槓族,喜歡學習的宅女。打工時期做過行銷、教育及IT行業。自學技能包括:網站開發、網路行銷、影片製作、平面設計等。

希望透過內在自我認知及外在技能培養的分享,幫助網路創業者實現理想生活,共建和諧美好的世界。

2 則評論

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

    1. 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 隱私政策服務條款