CSS｜font-family｜導入雲端字體｜內嵌字體｜特定區域使用不同字體

導入雲端字體 @import

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');

body{
  font-family: 'Noto Sans TC', sans-serif;
}

Google Fonts 提供了許多免費字型可用於個人與商用
https://fonts.google.com/

1. 查詢、選取所要的字型
2. 右方側邊欄中選取 @import 選項，複製程式碼。

3. 將已複製得程式碼貼至 網頁專案的 CSS 檔案中

4. 完成

---

專案中內嵌字體

1. 將你要用的字體檔放入你的網頁專案資料夾中
2. 引入方式同上

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');

body{
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
}

---

如何在同一個頁面中使用多種字型？

1. 步驟同上先將欲使用字型引入至 CSS 中
2. 在於應用得頁面之對應的 css 檔案撰寫 class

<style>
p.a {
  font-family: "Times New Roman", Times, serif;
}

p.b {
  font-family: Arial, Helvetica, sans-serif;
}
</style>

3. 完成

直接取用使用者本機端字型，非內嵌或外部引用字型。

為什麼要這樣用呢？
通常是因為我方沒有該字型的授權，所以不能內嵌網頁使用，需要使用者本機中擁有該字型，才會順利顯示，否則即用第二順位字型替代。

設定字型以字體簿中該字型的「系列名稱」為主
例如：系列 Noto Sans CJK TC

font-family: Noto Sans CJK TC, sans-serif;

---

參考資料：

• CSS font-family Property｜w3school
• font-family 的使用方法
• How to import Google Web Font in CSS file?
• Google Fonts

---

tags: CSS font-family 導入雲端字體 內嵌字體 使用不同字體