font-synthesis
ブラウザがフォントに存在しないウェイトやスタイル（太字、イタリック、スモールキャップス）を人工的に生成する機能の制御を行うプロパティです。日本語フォントなど合成が不自然になる書体では、合成を無効にして品質を保つことが重要です。font-synthesis-weight、font-synthesis-style等の個別プロパティのショートハンドです。
概要
ブラウザがフォントに存在しないウェイトやスタイル（太字、イタリック、スモールキャップス）を人工的に生成する機能の制御を行うプロパティです。日本語フォントなど合成が不自然になる書体では、合成を無効にして品質を保つことが重要です。font-synthesis-weight、font-synthesis-style等の個別プロパティのショートハンドです。
対応ブラウザ
デスクトップ
Chrome 97+
Edge 97+
Safari 9+
Firefox 34+
モバイル
Chrome Android 97+
Safari iOS 9+
Firefox Android 34+
基本構文
CSS
body {
font-synthesis: none;
}
.allow-bold {
font-synthesis: weight;
}
.allow-all {
font-synthesis: weight style small-caps;
}実務での使いどころ
-
日本語フォントの合成無効化
日本語Webフォントでブラウザによる不自然な太字合成やイタリック合成を無効にし、フォントデザイナーの意図を尊重します。
注意点
- font-synthesis: noneを設定すると太字やイタリックのフォントフェイスがない場合にスタイルが反映されなくなるため、必要なフォントウェイトが揃っていることを確認してください。
アクセシビリティ
- 合成を無効にすると太字が表示されなくなる可能性があるため、strongやem要素の視覚的な区別が維持されることを確認してください。