本頁只練什麼
能建立由偏好介面字型、本機中文字型到通用字族的有序 fallback stack。
訪客不一定安裝相同字型；沒有 fallback 時，文字可能落到不合適的預設字型，影響可讀性與版面寬度。
要修改的檔案：files/starter/style.css
定位：在 Computed 搜尋 font-family，記錄完整清單而不是只看畫面像不像。｜依 starter-1 定位，只修改「系統字型 fallback」的責任。
LESSON-06 · TOPIC 01
系統字型 fallback
能建立由偏好介面字型、本機中文字型到通用字族的有序 fallback stack。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
服務頁在不同電腦顯示的中文字型差異很大，但專案不打算下載外部字型。
起始狀態：示範文字只使用 serif，未提供系統介面 fallback。
完成後要看到
runtime 的 computed font-family 由 serif 改為包含 system-ui 與 sans-serif 的有序清單。
驗收證據：runtime before=serif；after 字串包含 system-ui 與 sans-serif；property=font-family
何時會用到
網站不嵌入 Web Font，或需要在不同作業系統維持穩定介面字型時。
常見混淆：fallback stack 不保證整段文字只用一個實體字型；缺少某個 glyph 時仍可能逐字 fallback。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
系統字型 fallback System font fallback stack
瀏覽器會從字型清單左邊開始找，找不到就往右用下一個，最後用通用字族保底。
正式說法：font-family 接受 prioritized family-name/generic-family list；user agent 使用第一個可提供所需 glyph 的可用字型。
font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC",sans-serif;三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/style.css定位：在 Computed 搜尋 font-family，記錄完整清單而不是只看畫面像不像。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「在 Computed 搜尋 font-family，記錄完整清單而不是只看畫面像不像。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 在 Computed 搜尋 font-family，記錄完整清單而不是只看畫面像不像。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/style.css定位：在 Computed 搜尋 font-family，記錄完整清單而不是只看畫面像不像。要做：執行實驗替文字切換 system-stack class，讀取 font-family 前後值。
預期：runtime 的 computed font-family 由 serif 改為包含 system-ui 與 sans-serif 的有序清單。
證據：runtime before=serif；after 字串包含 system-ui 與 sans-serif；property=font-family
卡住先查：在 Computed 搜尋 font-family，記錄完整清單而不是只看畫面像不像。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/style.css定位：在 Computed 搜尋 font-family，記錄完整清單而不是只看畫面像不像。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 computed font-family 由 serif 改為包含 system-ui 與 sans-serif 的有序清單。
證據：runtime before=serif；after 字串包含 system-ui 與 sans-serif；property=font-family
卡住先查：在 Computed 搜尋 font-family，記錄完整清單而不是只看畫面像不像。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
系統字型 fallbackruntime fixture · read-only demo
本主題示範畫面：
安心到府服務
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
清單由最偏好的具名字型排到最後的 generic family。
提示 2｜關鍵片段
加入 system-ui、平台 UI 字型、Noto Sans TC，最後保留 sans-serif。
提示 3｜完整解答與原因
完整解答與原因：瀏覽器依序尋找可用 glyph；完整 stack 即使缺少前項仍能落到系統字型與 sans-serif，不需外部請求。