同一款字體在不同瀏覽器中的呈現往往存在差異，除瀏覽器本身外，作業系統、字體渲染引擎、字體檔案格式等因素都會導致排版表現不一。我們期望在各瀏覽器實現字體排版的一致性，是否有完美的解決方案？帶著這些問題，我們深入剖析字體渲染的完整流程。

一、字體渲染核心流程

1. 解碼：從位元組到字符

瀏覽器接收網頁內容後，首要任務是將位元組流解碼為可閱讀的 Unicode 字符。判斷編碼方式的優先順序依次為：HTTP 響應頭的 Content-Type、頁面 meta charset、用戶在瀏覽器菜單強制指定的編碼、以及部分瀏覽器（如 Firefox）的統計式自動檢測。常見編碼體系經歷了 ASCII、GB2312/Big5 等擴展編碼，最終統一於 Unicode 字符集，而 UTF-8 是其最廣泛的實現方式之一。

2. 分段：語言與腳本的邏輯切分

編碼確定後，文本被轉換為 Unicode 字符序列。分段過程將文本按語言、腳本屬性切分為多個小段，為後續字體回退與排版引擎處理奠定基礎。

3. 字體選擇與回退機制

CSS font-family 定義了字體優先級列表。系統可用字體不僅取決於預裝字體，還受安裝軟體（如 Office、Adobe 套件）影響。Windows 可參考 Microsoft Typography，macOS 可查閱 List of typefaces included with OS X。若未指定中文字體，瀏覽器將依據其預設字體設置渲染，開發者可手動調整這些預設值。

二、字體分類與渲染特性

1. 技術分類

• 點陣字體：像素級固定圖案，無抗鋸齒，邊緣銳利（類似 PNG-8）。
• 輪廓字體：以數學曲線描述字形，支援任意縮放與抗鋸齒（類似 PNG-24）。包含 PostScript、TrueType、OpenType 三大主流格式。宋體與微軟雅黑均屬輪廓字體，僅在 12–17px 範圍內嵌入點陣資訊。
• 筆畫字體、METAFONT 等較少見於 Web 環境。

2. 字形風格分類

• 襯線體 — 字筆末端有裝飾「腳」
• 非襯線體 — 無裝飾，筆劃簡潔
• 等寬字體 — 每字符佔寬相同
• 手寫體 / 夢幻體 — 裝飾性強

三、渲染引擎差異：排版不一致的根本原因

文字在內容區的垂直位置由 line-height 與 content area 之差平分決定，但不同瀏覽器、渲染引擎對內容區定位、基線對齊的處理存在細微差異，導致同樣 CSS 下文字底部對齊線不一致。

主流作業系統採用的渲染引擎：

• macOS / iOS：Core Text（灰度渲染，預設關閉次像素抗鋸齒）
• Windows 7 / Vista：DirectWrite 或 GDI
• Windows XP：GDI

蘋果傾向還原字形設計原貌，追求優雅平滑；微軟側重字形清晰度與可讀性。這種設計哲學差異直接導致跨平台字體細節表現不同。

四、實現跨瀏覽器排版一致的策略

1. 使用 Web Font：透過 @font-face 載入統一字體檔案（WOFF2/WOFF），消除系統字體差異。
2. 標準化 CSS Reset：重置 line-height、vertical-align、font-kerning 等屬性。
3. 指定渲染模式：-webkit-font-smoothing: antialiased、-moz-osx-font-smoothing: grayscale 統一抗鋸齒策略。
4. 避免依賴系統預設字體：在 font-family 中明確列出跨平台通用字體堆疊。
5. 採用相對單位：使用 rem/em 搭配 font-size: 62.5% 縮放基準，減少像素級差異。

雖無法達到像素級「完美」一致，但結合上述策略可將差異控制在視覺可接受範圍內，確保核心閱讀體驗一致。