CSSのfont-synthesisでブラウザによるフォントの自動合成を制御する方法をわかりやすく解説

font-synthesis プロパティは、ブラウザがフォントのスタイルやウェイトを合成するかどうかを制御します。特定のウェイトやスタイルがフォントファミリーに存在しない場合、このプロパティを使用して、ブラウザが自動で合成するかどうかを指定できます。

font-synthesis の値とその効果の一覧

• none: フォントのスタイルやウェイトは合成されません。
• weight: ウェイト（太さ）が合成されます。
• style: フォントのスタイル（イタリックなど）が合成されます。
• weight style: ウェイトとスタイルの両方が合成されます。

font-synthesis が効かない時の原因と対策

フォントが合成可能でない

指定されたフォントファミリーが必要なスタイルやウェイトを持っている場合、合成は行われません。

対策: 必要に応じて異なるフォントファミリーやスタイルを指定し、合成が必要か確認します。

ブラウザのサポート不足

一部の古いブラウザでは、font-synthesis プロパティがサポートされていないことがあります。

対策: 最新のブラウザを使用するか、適切なフォントフォールバックを設定します。

共通するCSSコード

特定のウェイト、スタイルが存在しないフォントであるzillaslabフォントを用いて表示例を示します。

 /* @font-face でフォントを定義 */
@font-face {
    font-family: 'Zilla Slab';
    src: url('https://example.com/fonts/ZillaSlab-Regular.ttf') format('truetype');
}
.css-sample-container {
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  text-align: center;
  font-family: 'Zilla Slab', serif;
}

<div class="css-sample-container synthesis-none">
  フォント合成なし
</div>

.css-sample-container.synthesis-none {
  font-synthesis: none;
}

<div class="css-sample-container synthesis-weight">
  ウェイト合成
</div>

.css-sample-container.synthesis-weight {
  font-synthesis: weight;
  font-weight: bold;
}

<div class="css-sample-container synthesis-style">
  スタイル合成
</div>

.css-sample-container.synthesis-style {
  font-synthesis: style;
  font-style: italic;
}

<div class="css-sample-container synthesis-weight-style">
  ウェイトとスタイル合成
</div>

.css-sample-container.synthesis-weight-style {
  font-synthesis: weight style;
  font-weight: bold;
  font-style: italic;
}