font-synthesis-style
イタリック体やoblique体がフォントに含まれていない場合のブラウザの合成動作を制御するプロパティです。特に日本語やCJKフォントではイタリック合成が不自然になりやすいため、合成を無効にすることで視覚的な品質を保てます。font-synthesisショートハンドの個別プロパティの一つです。
概要
イタリック体やoblique体がフォントに含まれていない場合のブラウザの合成動作を制御するプロパティです。特に日本語やCJKフォントではイタリック合成が不自然になりやすいため、合成を無効にすることで視覚的な品質を保てます。font-synthesisショートハンドの個別プロパティの一つです。
対応ブラウザ
デスクトップ
Chrome 97+
Edge 97+
Safari 16.4+
Firefox 111+
モバイル
Chrome Android 97+
Safari iOS 16.4+
Firefox Android 111+
基本構文
CSS
.japanese-text {
font-synthesis-style: none;
}
.western-text {
font-synthesis-style: auto;
}実務での使いどころ
-
日本語テキストの合成イタリック防止
日本語フォントに対してブラウザが人工的にテキストを傾ける合成イタリックを無効にし、読みやすさを維持します。
注意点
- 合成を無効にするとem要素のイタリック表示がなくなるため、代替の強調スタイル（太字、色変更など）を用意してください。
アクセシビリティ
- イタリック合成を無効にした場合でも、em要素のセマンティクスは保持されるため、スクリーンリーダーの読み上げには影響しません。