林金露老師_網頁設計線上數位教學網誌: Google Font 中文字體(六款)CSS語法引用及使用圖解

Google Font 中文字體(六款)CSS語法引用及使用圖解

提供解決網頁設計師在網頁設計時的中文字體問題

Google Font 提供黑體、仿宋、明體、楷體及圓體及思源黑體Noto Sans TC等六種中文
若想要使用Google Font中文字字體
方法是:
1.找到Google Font中文字字體-(多國語言字體,含繁/簡/日/韓)網頁網址,(https://fonts.google.com/earlyaccess),找到繁體中文(Chinese Traditional)項目
2.在CSS內引用語法:(@import url引用指定中文字體,再用class命名如 font10,再指定其中文字體的名稱如'cwTeXYen', sans-serif)(https:的網址前導標籤可省略不寫,也可加入)

Google中文字-字體: 圓體
@import url(//fonts.googleapis.com/earlyaccess/cwtexyen.css);
.font10 {
font-family: 'cwTeXYen', sans-serif;
}

Google中文字-字體: 仿宋體
@import url(//fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
.font11 {
font-family: 'cwTeXFangSong', serif;
}

Google中文字-字體: 黑體
@import url(//fonts.googleapis.com/earlyaccess/cwtexhei.css);
.font12 {
font-family: 'cwTeXHei', sans-serif;
}

Google中文字-字體: 明體
@import url(//fonts.googleapis.com/earlyaccess/cwtexming.css);
.font13 {
font-family: 'cwTeXMing', serif;
}

Google中文字-字體: 楷體
@import url(//fonts.googleapis.com/earlyaccess/cwtexkai.css);
.font14 {
font-family: 'cwTeXKai', serif;
}

Google中文字-字體: 思源黑體 (Noto Sans TC 常用國字標準字體 7,800個漢字)
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
.font15 {
font-family: 'Noto Sans TC', sans-serif;
}

思源黑體Noto Sans TC已被分類到繁體中文文檔中最常見的7,800個漢字。添加了223個字符，涵蓋台灣“中華人民共和國商務部”11643 P1和常用國字標準字體表以及香港常用字字形表和IRG HB0和HB1的所有字符。除了漢子，還包括Bopomofo，CJK Radicals，ASCII，標點符號和全角字符。
思源黑體Noto Sans TC裡面除了標準的 Normal 之外，另外還提供了 100、300、400、500、700、900 五種不同的粗細，你可以透過 font-weight 的方式來調整。
語法如: font-weight: 500;
Google 當初聯合 Adobe 與其他亞洲合作公司，製作思源黑體與思源宋體的初衷：希望有一套完整的繁體簡體中文、日文、韓文字型，可以讓各種現代網頁、文章、軟體介面上都不再因為缺乏字型而出現空格豆腐字（「 no more tofu 」）。

多年前開始， Google 展開了設計全世界各種語言字型的計畫，一開始的目的是讓 Android 與 Chrome OS 等系統能夠具備完整的多語字型支援，讓每種語言的字型有設計上的一致性，無論在顯示網頁、展示介面、閱讀文書時都「不會出現無法顯示的豆腐方塊」。
所以叫做「 no more tofu 」，簡稱為「 Noto 」，亦稱為「 Google Noto Fonts 」。
其中針對每種特殊語言的字型支援，則是與各種志願者和不同單位合作開發， Google 則提供設計的統一風格指導，例如兩年前在台灣轟動一時的免費中文字型：「Adobe與Google合推全新中文免費字型思源黑體」，正是這個計畫中的一支。

Google Noto Fonts 網址: https://www.google.com/get/noto/