font-synthesisとは？

CSSのfont-synthesisプロパティは、ブラウザがフォントに存在しないスタイルを自動的に合成するかどうかを制御するプロパティです。特定のフォントが太字や斜体のバリエーションを持っていない場合、ブラウザはこれらを自動で合成しようとします。例えば、フォントが太字バージョンを持っていないとき、通常のウェイトのフォントを太く見せるために擬似的に太字を合成することがあります。 このプロパティを使用することで、ブラウザによるフォントの合成を防ぎ、デザインやタイポグラフィの一貫性を保つことができます。

font-synthesisの構文

font-synthesis: none | weight | style | weight style;

• none: 自動合成を行わない。フォントに存在しないスタイルは無視される。
• weight: フォントに太字（ボールド）のバリエーションがない場合に、ブラウザが太字を合成する。
• style: フォントに斜体（イタリック）のバリエーションがない場合に、ブラウザが斜体を合成する。
• weight style: 太字と斜体の両方を合成する。

使用例

基本的な使用例

デフォルトでは、ブラウザは太字や斜体がフォントに含まれていない場合にそれを合成します。しかし、デザインの一貫性を保つために、合成を防ぎたい場合があります。

p {
  font-family: "CustomFont", sans-serif;
  font-synthesis: none;
}

この設定では、指定したフォントが太字や斜体に対応していない場合、ブラウザは代わりにそれを自動的に作成することなく、元のスタイルが維持されます。

太字のみを合成する

太字のバリエーションがないフォントに対して、太字を合成したい場合は、weightを指定します。

h1 {
  font-family: "CustomFont", sans-serif;
  font-synthesis: weight;
}

この設定では、フォントに太字がない場合でも、ブラウザが自動で太字を合成します。

斜体のみを合成する

フォントに斜体がない場合、ブラウザが斜体を合成するように設定するには、styleを指定します。

em {
  font-family: "CustomFont", sans-serif;
  font-synthesis: style;
}

この設定では、斜体バリエーションがないフォントでも、ブラウザが斜体を合成して表示します。

太字と斜体を両方合成する

両方のスタイルを合成したい場合は、weight styleを指定します。

strong, em {
  font-family: "CustomFont", sans-serif;
  font-synthesis: weight style;
}

これにより、太字と斜体がフォントに存在しない場合、ブラウザがそれを自動的に作成します。

デザイン上の注意点

font-synthesisを使用する場合、デザインの一貫性を重視することが大切です。ブラウザによっては、合成された太字や斜体が意図しない見た目になることがあります。特に、フォント自体がデザインにおいて重要な役割を果たす場合、font-synthesisをnoneに設定して、フォントの正確な表示を確保することを推奨します。

まとめ

CSSのfont-synthesisプロパティは、ブラウザがフォントのスタイルを自動的に合成するかどうかを制御するために使用されます。デフォルトでは、ブラウザが太字や斜体を自動で合成しますが、このプロパティを活用することで、合成を防ぎ、デザインの一貫性を保つことができます。特にフォントがデザイン全体に影響を与える場合、適切な使用が重要です。