font-synthesis
font-synthesis 一括指定の CSS プロパティで、指定されたフォントファミリに太字、斜体、スモールキャップ、下付き文字、上付き文字がない場合に、ブラウザーが合成するかどうかを指定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 97 | 97 | 34 | 9 | 97 | 9 | |
position | | | 118 | | | |
small-caps | 97 | 97 | 93 | 10.1 | 97 | 10.3 |
style | 97 | 97 | 34 | 10.1 | 97 | 10.3 |
weight | 97 | 97 | 34 | 10.1 | 97 | 10.3 |
基本構文
CSS
body {
font-synthesis: none;
}
.allow-bold {
font-synthesis: weight;
}
.allow-all {
font-synthesis: weight style small-caps;
}ライブデモ
実務での使いどころ
-
日本語フォントの合成無効化
日本語Webフォントでブラウザによる不自然な太字合成やイタリック合成を無効にし、フォントデザイナーの意図を尊重します。
注意点
- font-synthesis: noneを設定すると太字やイタリックのフォントフェイスがない場合にスタイルが反映されなくなるため、必要なフォントウェイトが揃っていることを確認してください。
アクセシビリティ
- 合成を無効にすると太字が表示されなくなる可能性があるため、strongやem要素の視覚的な区別が維持されることを確認してください。