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);


您或許喜歡

0 意見

精選文章

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

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

Facebook