為什麼 Chrome 和 Safari 相同字體的 kerning 效果存在明顯差異？

上圖為 Safari，下圖為 Chrome：

body {
font-family: Baskerville;
font-size: large;
text-rendering: optimizeLegibility;
font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
font-kerning: normal;
}


• 字體渲染是個複雜的過程，影響字形（glyph）定位（或可理解為間距）的因素遠不止 kerning 這一項。
• 因為 Chrome 和 Safari 做 gridding（對齊到像素網格）時的配置不同，即使雙方都是像素級別（而非亞像素級別）的定位（positioning），用同樣的字體在同樣的字型大小下也會計算出最終不同的 advance 於是排版出不同的文本——這一層差異不論你是否開啟 kerning 都是存在的。
• 昨晚我在 Twitter 上看到題主的對比圖，看到圖中 Safari 有亞像素定位而 Chrome 沒有。今天按照問題補充說明中的代碼測試卻看不到 Safari 里的亞像素定位現象，然後發現是字型大小問題：題主截圖中的字型大小是 16 px（然後在 Retina 顯示屏上物理像素數翻倍了），但如果按所述代碼中的 font-size: large 來測試，字型大小會是 18 px ——而 Safari 似乎是只在 ≤ 16 px 時才開啟亞像素定位。
• 請題主確保自己給出的信息準確。首先，討論字體渲染問題時就不該用 font-size: large; 這種不可靠的相對字型大小，必須直接給像素值。而且，提問時不說明自己的操作系統、瀏覽器版本等信息這也很荒唐。
• &> 16 px 時，Chrome 和 Safari 都用像素級別的定位，但配置不同，於是最終在柵格圖像中的字形定位也不同。而 ≤ 16 px 時，Safari 有亞像素定位而 Chrome 沒有，雙方更是不可能一致。所以即使同開或同關 kerning，雙方字體渲染結果的字形定位也是不會一致的。
• 然後，在抗鋸齒層面，題主的截圖中，Safari 是亞像素抗鋸齒，而 Chrome 是灰階抗鋸齒。
• 實際上，應該說截圖中的 Chrome 文本是 Chrome 在亞像素抗拒齒設定下（-webkit-font-smoothing: subpixel-antialiased）做出的和單純灰階抗拒齒（-webkit-font-smoothing: antialiased）並不一致的灰階抗拒齒。Chrome 和 Safari 近來對亞像素抗鋸齒的開關規律我不太理解。

本來做了一組對比截圖，但知乎會把 PNG 轉換成 JPEG 以致沒法用於展示字體渲染問題，我之前常用的 Droplr 也收費了，不知該用什麼圖床了。CloudApp 在牆內嗎？

&
&
&
&
&Kerning: Chrome vs Safari&
& .sample {
font-family: Baskerville;
font-size: 16px;
}
.kerning-off { text-rendering: optimizeSpeed; }
.kerning-on { text-rendering: optimizeLegibility; }
.grayscale { -webkit-font-smoothing: antialiased; }
.subpixel { -webkit-font-smoothing: subpixel-antialiased; }
& &
&
&

#KerningOff #Grayscale
&Their application can prevent discomfort,
&transmission, automobiles, and buildings.
& &
&