##不只是美觀：還關係到用戶體驗!
在開發網站前前後後的確是對於文字做了很多設定上的調整，
常見的問題是MacOS和Windows系統的預設字型不同，而系統自動使用了替代字型。
##為什麼要有這功能
文字字型（font-family）功能是網頁設計中的關鍵元素，直接影響到網站的視覺風格和易讀性。
不同字型能帶給使用者的感受不同，正確選擇字型可以提升內容的可讀性和整體觀感，還能增加品牌識別度。
因此，字型在網站設計中扮演著非常重要的角色。
##核心結構
CSS中的font-family屬性是用來定義網頁上文字所使用的字體。讓開發者為不同元素指定首選字體以及替代字體。一般可能會列出多個字體名稱，當瀏覽器無法找到首選字體時，會自動使用替代字體。
##主要功能
選擇字型：設計者可以選擇適合網頁風格的字型，中文和英文可搭配不同字體。
字體降級機制：指定的多個字體依次檢查，如果首選字體無法加載或不支持，則依次使用替代字體。
支援多語系：可預設中英文字體選擇，確保在各國語言環境下文字正確顯示。
##注意事項
中英文不同字型時：若為中文網站則將中文字型放在前面，隨後是英文字型。因是以中文為主的頁面，更能確保中文字型的正確顯示。
字型的兼容性：部分字型可能不適用於所有瀏覽器或系統，應考慮使用常見字體如 Arial, Helvetica, 微軟正黑體。
字型的大小與行高：選擇字型後，需根據其特性調整字體大小與行高，確保版面整齊且易讀。
##簡單範例應用
<style>
body {
font-family: "Arial", "Microsoft JhengHei", "Helvetica", sans-serif; /* 預設Arial，支援中文的微軟正黑體 */
}
//無襯線體 (Sans-serif) 是指字母筆劃沒有額外裝飾線條，筆劃粗細一致，更簡潔現代感，較適合於數位內容和現代設計。
h1 {
font-family: "Times New Roman", serif; /* h1使用Times New Roman字型 */
}
//襯線體 (Serif) 是指文字筆劃有附加的小型線條裝飾，會使字型看起來更正式，通常適用於金融或法律業
p {
font-family: "Verdana", sans-serif; /* 文章內容使用Verdana字型，確保可讀性高 */
}
</style>
<body>
<h1>歡迎光臨</h1> <!-- 使用Times New Roman字型顯示標題 -->
<p>網站的主要內容，使用了Verdana字型來提升可讀性。</p> <!-- 文字內容使用Verdana字型顯示 -->
</body>
iThome鐵人賽
看影片追技術