結論先行：四大核心判斷

1. 跨平台公用字體：英文/數字僅 9 款（Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana）；中文無公用字體。
2. 微軟雅黑覆蓋率<30%（僅 Win7+ Vista 內建），XP 未主動安裝者 fallback 宋體/黑體，CSS 必須聲明 fallback 字體棧。
3. Mac 瀏覽器字體回退規則複雜：未指定 Mac 字體時，依英文字體屬性（襯線/無襯線）自動映射華文宋體/華文黑體，特例：Courier New→華文黑體、Comic Sans MS→華文楷體。
4. 正文 12-17px 強薦宋體：此區間宋體用點陣渲染銳利清晰，微軟雅黑僅輪廓渲染反而模糊。

一、字體可用性矩陣

A. 中文字體：雙平台零交集

• Windows：中易宋體/新宋體/仿宋/黑體/楷體/微軟雅黑（部分）
• Mac：華文宋體/仿宋/華文黑體/華文細黑/華文楷體
• 策略：Mac 端參考 Apple 官網，優先指定 `font-family: "華文黑體", "Heiti SC", "Microsoft YaHei", sans-serif` 保持系統一致性。

B. 英文字體：9 款安全區

優先使用此 9 款可避免圖片替換，降低帶寬、提升加載速度。

二、視覺渲染差異實測

A. Photoshop 設計稿 vs Web 實際渲染

渲染引擎哲學差異：
🍎 Mac OS X：忠實字體設計，最大化保留外形，邊緣模糊換取曲線細節，小字號偏模糊。
🪟 Windows (ClearType)：強調銳利清晰，犧牲字體原貌換取小字號銳度。XP 默認關閉 ClearType，Vista+ 默認開啟。
引用自知乎高票回答 & Typekit 官方技術博客

B. Mac 端中文字體差異實測

Mac「宋體」= 華文宋體，Win「宋體」= 中易宋體 —— 同名異形。
Mac「黑體」= 華文黑體（粗體來自華文黑體，常規來自華文細黑），Win「黑體」= 中易黑體。
結論：Mac 設計稿還原到 Windows 必有視覺落差，設計階段必須雙端預覽。

C. Mac 瀏覽器字體回退邏輯圖解

關鍵發現：Chrome 下華文宋體無法正常加粗，需特別注意。

D. 宋體點陣渲染的字號陷阱

Win Vista+ 僅提供 12/14/16px 三套點陣。13/15/17px 實際調用小一號點陣（字距+1px，點陣不變），導致 PS 中 13/15/17px 宋體無法 Web 還原。
鐵律：設計稿避開 13/15/17px 宋體，正文首選 12/14/16px。

E. 具體字體渲染效果圖鑑

觀察點：黑體鋸齒嚴重、小字號仿宋/楷體不加粗極差、12-17px 宋體>微軟雅黑清晰度（點陣優勢）。

前端落地建議清單

• CSS `font-family` 必須聲明完整 fallback 鏈：Mac 字體在前，Win 字體在後，最後接通用族
• 正文 12-16px 鎖定宋體/中易宋體，標題 18px+ 可用微軟雅黑/華文黑體
• 設計交付階段：雙端實機預覽、截圖對比、標註可接受差異閾值
• 考慮 Web Font（如 Noto Sans SC, PingFang SC Subset）消除平台差異，權衡載入性能
• 建立團隊《字體使用規範》，納入設計系統組件庫

字體渲染差異不是技術缺陷，而是平台哲學差異的必然結果。專業前端與設計師的價值，在於建立跨平台視覺一致性的可控邊界，而非追求像素級完美復刻。