Foundation テンプレート(v2026.6)との互換性の問題

テーマの CSS に以下のコードを追加することで、この問題を修正できます:

body {
    --webkit-font-smoothing: auto;
}

このプロパティが何をするのかについての詳細は、こちらで確認できます: A Modern CSS Reset • Josh W. Comeau

2018 年にリリースされた macOS Mojave では、オペレーティングシステム全体でサブピクセルアンチエイリアシングが無効化されました。おそらく、最新のハードウェアでは害の方が大きいと判断したのでしょう。

混乱を招くことに、Chrome や Safari などの macOS ブラウザでは、デフォルトでサブピクセルアンチエイリアシングが使用され続けています。-webkit-font-smoothingantialiased に設定することで、これを明示的に無効にする必要があります。

違いを示すために… 左が --webkit-font-smoothing: auto;、右が --webkit-font-smoothing: antialiased; です。

macOS はデフォルトでテキストをより濃くレンダリングしますが、これはブラウザ内でのみ適用され、OS の他の部分には適用されません… antialiased に設定することで、他のオペレーティングシステムでのテキストレンダリングに近づきます… Windows の Chrome ではこの CSS は適用されず、テキストはデフォルトでこのように表示されます: