要旨
Safariのレンダリングエンジンは、アンチエイリアスの方式を動的に選択しているのではないだろうか。
なぜなら、Safariで、テキストの太さが動的に変わる現象を観測したからだ。
背景
そもそもテキストの太さとは
テキストの見掛けの太さ（濃さ）は、文字そのものの太さ以外に、文字に掛かるアンチエイリアスの方式によっても変わります。
アンチエイリアスの方式
二種類あります。
- グレースケールレンダリング（細く見える）
- サブピクセルレンダリング（太く見える）
方式の指定
これらのレンダリング方式は、CSSで明示的に選択することができます。
<!-- グレースケールレンダリング -->
-webkit-font-smoothing: antialiased;
<!-- サブピクセルレンダリング -->
-webkit-font-smoothing: subpixel-antialiased;
そして、明示的に選択しなかった場合の方式が、Safariでは不定なのでは？というお話です。
現象
事の発端は、以下の現象を観測したことから始まります。
- 共通ヘッダー内のテキストのアンチエイリアス方式がページ間で異なる
調査を進めたところ、他に以下のような症状を観測しました。
- ヘッダーのテキストはグレースケールレンダリングされ、それ以外のコンテンツはサブピクセルレンダリングされる
- 検証ツールでコンテンツを編集すると、全く別の位置にあるヘッダーのアンチエイリアス方式が変化する
- 同じページでも、JSをONにした場合とOFFにした場合とでアンチエイリアス方式が異なる
ううむ、全然わからない。
font-smoothingの指定はどのCSSからも検出されませんでした。
仮説
MacのSafariのレンダリングエンジン(webkit)が、テキストをアンチエイリアシングする方式をレンダーツリーの内容によって動的に選択し分けているのではないか。
調べても公式情報が見当たらなかったので仮説止まりですが、この可能性を疑っています。もしご存知でしたらご指摘頂ければと思います。
端末
-
El Capitan 10.11.5
-
Safari 9.1.1