【CSS Modules】font-synthesis-weightプロパティの使い方

font-synthesis-weightプロパティは、CSSにおいて、使用されているフォントに適切な太字（bold）のスタイルが定義されていない場合に、ブラウザがその太字のスタイルを擬似的に「合成」して表示するかどうかを制御するプロパティです。

通常、フォントにはRegular、Boldなどの複数の太さ（ウェイト）のバリエーションが用意されています。しかし、Webフォントの読み込み設定やシステムフォントの利用状況によっては、CSSでfont-weight: bold;などの太字が指定されても、その太さのフォントデータが存在しないことがあります。このような状況で、ブラウザがどのように太字の表示を処理するかをこのプロパティで制御します。

このfont-synthesis-weightプロパティをnoneに設定すると、ブラウザは太字を合成せず、利用可能な最も近いフォントウェイトでテキストを表示します。これにより、フォントデータの欠如による予期せぬ太字の合成を防ぎ、デザインの一貫性を保つことができます。一方、auto（またはデフォルト値）に設定されている場合、ブラウザはテキストの視認性を保つために、既存のフォントから太字を合成して表示を試みます。

合成された太字は、元のフォントデザイナーが意図的に作成した太字のウェイトとは異なり、表示品質やデザインの整合性に影響を与える可能性があります。そのため、このプロパティは、テキストの可読性やWebサイト全体のデザインの一貫性を保つ上で重要な役割を果たします。特に、厳密なタイポグラフィの制御が求められる場面で活用されます。

Copy
1selector {
2  font-synthesis-weight: auto;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません