09 Figma 字重與瀏覽器顯示差異

30 秒摘要

• 現象：Figma 看起來正常的字重，在 macOS、Safari、Chrome 或 Retina 裝置上顯得更粗。
• 影響：設計驗收落差、跨平台視覺不一致。
• 優先方向：先檢查字型版本、字重載入，再確認是否為 Apple 平台渲染差異。

先做這三步

1. 確認 Figma 與前端使用相同字型名稱與版本。
2. 確認前端有載入正確字重，例如 \(400\)、\(500\)、\(600\)、\(700\)。
3. 用 macOS Safari、macOS Chrome、Windows Chrome 交叉比對。

標準解法

加入全域文字渲染設定：

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

預期結果：Apple 裝置上的文字不再明顯偏粗，整體更接近設計稿。

驗證方式

• 比對 macOS Safari、macOS Chrome、Windows Chrome。
• 檢查標題、小字、按鈕文字是否改善。

升級條件

• 套用後仍與設計稿差異過大。
• 字型版本、字重資產或 Variable Font 設定本身有疑點。

備註

• 本問題多數屬於跨平台字體渲染差異，不一定是 CSS 寫錯。
• 若已確認字型版本與字重載入無誤，優先檢查 macOS / Safari 的實機顯示。
• 驗收以主要目標平台實機為準，不以 Figma 截圖逐像素比對。