在過去,我們在設定網頁字型時,如果設定的字型在使用者端的電腦沒有安裝那款字型,就只會顯示使用者電腦預設的字型。導致設計師在自己的電腦製作網頁時,設定字型看得很開心,結果使用者端看到的只是細明體。
(幾乎)所有電腦都有的字體,如細明體、標楷體、微軟正黑體等。
然而現在我們可以藉由第三方提供的字型,來讓使用者由第三方位址(下載)顯示字型,這樣就可以確保使用者看到的字型就是我們宣告的字型。
提供字型比較有規模的單位有 Google 的 NOTO 字型,以及 Aaobe 的字型,但是 Adobe 字型有流量的限制,所以這邊只講 Google 的 NOTO 字型。
Google 其實提供非常多種線上字型(參考所有 Google 雲端字型),可是大部分都是英文字型,中文字型只有Noto Sans TC 思源黑體 和 Noto Serif TC 明體。
1以下的例子,當我們還沒設定字型時是細明體。@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC); body{ font-family: 'Noto Sans TC',serif; }4我們可以看到字型已經變為思源黑體
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC); body{ font-family: 'Noto Sans TC',serif; font-weight:800;/*字體粗細*/ font-size:20px;/*字體大小*/ }