Try   HackMD

CSS 15. font-family and font-weight

設定網頁字體

  • 可參考,font stack 網站
    這裡有詳細分析目前各種字體在各裝置上的普遍程度,
    選擇字體在開發上尤其重要。
    因為開發者無法保證一些特殊字體在各使用者上均有這些特殊字體。

font-family 屬性,預設網頁文字字體群組

  • 在 CSS 設定該屬性:

    找到想要更改的目標選擇器,例如範例我選擇 h1,h2

h1,h2{
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

(應用) / google fonts

  • google fonts,提供了更豐富的字體選擇可使用。
  1. 可選擇國家/語言,來找到適合或是喜歡的字體來做使用。

  2. 選擇需要的字體後,進入頁面。可以看到分類,找到關鍵字'select' - 'Use on the web',會找到關鍵字連結,將它給 copy 到專案就對了。

  3. 複製 link 需注意,請 copy 至自己的 CSS 檔案之前,以利後續編輯的優先順序。


font weight

  • 調整文字的粗細度。 400是 default 預設。
p {
 font-weight: 400; 
}
tags: 2022 網頁開發全攻略教程 / CSS篇章 - font styling