font-synthesis-style
font-synthesis-style は CSS のプロパティで、フォントファミリーに斜体書体がない場合に、ブラウザーが斜体書体を合成するかどうかを指定します。
すべての書体合成値を制御するために、多くの場合は一括指定プロパティ font-synthesis を使用した方が便利です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 97 | 97 | 111 | 16.4 | 97 | 16.4 | |
auto | 97 | 97 | 111 | 16.4 | 97 | 16.4 |
none | 97 | 97 | 111 | 16.4 | 97 | 16.4 |
基本構文
CSS
.japanese-text {
font-synthesis-style: none;
}
.western-text {
font-synthesis-style: auto;
}ライブデモ
実務での使いどころ
-
日本語テキストの合成イタリック防止
日本語フォントに対してブラウザが人工的にテキストを傾ける合成イタリックを無効にし、読みやすさを維持します。
注意点
- 合成を無効にするとem要素のイタリック表示がなくなるため、代替の強調スタイル（太字、色変更など）を用意してください。
アクセシビリティ
- イタリック合成を無効にした場合でも、em要素のセマンティクスは保持されるため、スクリーンリーダーの読み上げには影響しません。