用 CSS 修復 WebKit 偽粗體問題

如何重現：Code Pen 樣例頁面（使用最新版 iOS/macOS Safari 訪問）

解決方式：

font-synthesis: style;n

樣例截圖：

說明：

• 重現版本為 iOS 11.1.1，macOS High Sierra 10.13.1，條件為使用 -apple-system 指定字體（即同時使用蘋方與 San Francisco）
• 紅色的方框內被加粗的中文是「偽粗體」，在字重為 600/700 時觸發
• 綠色的方框內是應用樣式修復後的結果
• font-synthesis: initial相當於 font-synthesis: weight style，因此不能使用 font-synthesis: none ，否則會影響斜體（font-style）的合成
• 高 DPI 設備（iPhone X）問題不太明顯
• WebKit 一個月前修復了這個問題（r223589，此文的修復方法就是參考了它的回歸測試代碼），<del>但什麼時候能發布不確定</del> 己在 Safari Technology Preview 11.1（WebKit 13605.1.13.2）中確認被修復

關於字體樣式的補充：

• 為了與原生界面的字體一致，web 頁面會按「system-ui, fallback names, generic name」順序指定字體，如：font-family: -apple-system, BlinkMacSystemFont, ..., sans-serif
• 根據截圖也可以看出，蘋方沒有 Bold 字重（只有 Semibold，600），而 San Francisco 有 Bold 字重，會導致 CSS 使用 bold（700）指定字重時，中西文粗體不均衡（中文回退到 600），使用 500 或 600 會達到最佳效果
• Android 中文使用思源黑體，但由於字重缺失，需要使用 700 達到加粗效果；西文有點值得注意，lang 屬性會影響字體選擇（CodePen demo: lang & Noto Sans & Roboto），zh 會應用思源黑體，en 會應用 Roboto

根據上述限制，推薦在項目中使用 mixin 實現粗體：

/* postcss-mixins 的例子 */n@define-mixin bold {n /* 也可以只應用在 iOS/macOS 上 */n font-weight: 600;n font-synthesis: style;nn html[data-android] & {n font-weight: 700;n }n}nn.title {n @mixin bold;n}n

當中英文同時出現而字重不一的例子，來自 iOS 官方應用：