字體載入策略
font-display: swap + preload + subset
網頁字體像訂做制服——好看，但貨到之前員工要嘛光著（文字隱形）要嘛先穿舊衣再當眾換裝（字體交換閃跳）。
03為什麼是現在學
中文字體檔動輒數 MB，是 LCP 與 CLS 的共同嫌疑人。策略選對，美觀與速度可以兼得；選錯，兩頭空。
04白話理解（對客戶簡報可直接引用）
三件套：①font-display: swap——先用系統字顯示，字體到了再換（絕不能讓文字隱形等字體）②preload 關鍵字重 ③subset 子集化——中文字體只打包用得到的字符集，數 MB 壓到數百 KB。若用 Google Fonts，Next.js 的 next/font 自動處理大半。
05工具箱
- ▸next/font 或字體子集化工具 — 中文字體 subset 是必修不是選修
- ▸DevTools Network 面板 — 字體檔大小與載入時序
06怎麼做 · SOP 3 步（每步標產出物）
- 1盤點字體檔數量與大小（目標：字重 ≤3、總量越小越好）→ 字體資產表
- 2swap＋preload＋subset 落地→ 字體策略實作
- 3驗證無 FOIT（文字隱形期）→ 驗證紀錄
07場景應用（實戰經驗）
- ◆品牌指定思源黑體全字重上陣＝七個 MB 級檔案——收斂到兩個字重＋subset 後，字體總量 300KB，視覺無感差異。
08⚠️ 常見誤區
- ✕用 JS 動態載入字體再套用——多繞一圈，交換閃跳更明顯。
口訣
「先穿系統字，正裝到了再換；行李只帶用得到的字。」
10里程碑 · 完成標準（可驗證）
- ☐swap 生效無隱形期
- ☐中文字體已子集化
- ☐字重 ≤3
學習者勾自己的進度；顧問勾客戶專案的交付——同一份標準，兩種用法。
12檢核方式與依據出處
程式自動判定：輸入網址，掃描引擎自己爬、自己打 API、自己判定。
- 🟢 官方明文web.dev：字體最佳做法 ↗
依據等級決定計分權重（🟢×3／🔵×2／⚠️×1）——權重量的是「依據有多硬」， 不是「我們覺得多重要」。查無權威文件的判準，誠實標「業界慣例」。