剛開始學習的時候，我在font-family寫的值都只會設定一個，完全不知道需要加上通用字型，也不知道不同的作業系統會有不同的預設字型設定，看過一些資料後，才知道原來字型設定要注意的地方也是不少。

font-family 設定規則

font-family 可以用來設定一種字體或多種不同的字體，每種字體間用半形逗號「,」隔開。
瀏覽器在載入字型樣式時，會從左邊到右來判斷，如果瀏覽器不支援第一個字型，則會嘗試下一個，如果都沒有找到相對應的字體，就會採用電腦預設字型。

font-family 分成兩種類型

font-family的值分為兩種，一個是指定字型，另一種是通用字型。

指定字型 (font family name)

• 指定字型會搭配通用字型一起使用，避免碰到無法載入的情況發生。
  例如:
  font-family: Georgia, serif;

• 字型名稱不用加上雙引號，但如果名稱中間有空格，就一定要加上雙引號。
  例如:
  font-family: "Gill Sans Extrabold", sans-serif;

• 為了避免編碼問題，中文字型名稱會建議改用英文字型名稱
  例如:
  會將
  font-family: 思源黑體, 微軟正黑體, 蘋方體, 黑體, sans-serif, serif;
  寫成
  font-family: "Noto Sans CJK TC", "Microsoft JhengHei", PingFang, STHeiti, sans-serif, serif;

通用字型 (generic family name)

通用字型是當在作業系統中完全找不到對應字體時，會顯示的預設字體，所以通常都會放在font-family屬性設定值的最後面

常用的通用字型主要有以下兩個:

• font-family: serif;(無襯線體)
  襯線 serif 指的是字形筆畫末端的裝飾部分，無襯線體多是黑體字這種，筆劃粗細大都較為一致。
• font-family: sans-serif;(襯線體)

參考資料:Font-family - 金魚都能懂的CSS必學屬性
CSS font-family 詳細介紹
font-family要怎麼玩

設定預設字型

可以在body額外設定預設字型 同樣是為了避免找不到能用的字型
順序：英文字型 > Linux系統 > Mac系統 > Windows > 通用字體
（如果中文字型在前，那麼網頁可能會讀取不到英文的字體，所以使用機率較少的字體會放較前面，使用機率高的字體放越後面）

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
               /* mac, IOS 系統字體               Windows 英文系統字   微軟正黑體    Android 系統字  IOS 系統字  通用字體 */             
}

相關資料:鐵人賽：系統字體介紹

免費的外部載入字體

• Google Fonts
  

以上為個人學習筆記整理
若有錯誤，歡迎指正