font-synthesis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2022.

font-synthesis は CSS のプロパティで、太字やイタリックの字体がない場合に、ブラウザーが合成してよいかどうかを制御します。

構文

css
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: small-caps;
font-synthesis: weight style small-caps;

/* グローバル値 */
font-synthesis: inherit;
font-synthesis: initial;
font-synthesis: revert;
font-synthesis: unset;

試してみましょう

値

none

太字およびイタリックの字体を合成しないことを示すキーワードです。

weight

必要であれば、太字の字体を合成してよいことを示すキーワードです。

style

必要であれば、イタリックの字体を合成してよいことを示すキーワードです。

small-caps

必要であれば、スモールキャップの字体を合成してよいことを示すキーワードです。

解説

ほとんどの標準的な欧文フォントにはイタリック体や太字の変化形が含まれていますが、多くのノベルティフォントには含まれていません。中国語、日本語、韓国語、その他の表語文字に使用されているフォントは、これらの変化形を含まない傾向があり、それらを合成するとテキストの可読性が損なわれる可能性があります。このような場合には、ブラウザーの既定のフォント合成機能をオフにしたほうがよいかもしれません。

公式定義

初期値weight style small-caps position
適用対象すべての要素とテキスト。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類離散値

形式定義

font-synthesis = 
  none                                           |
  [ weight || style || small-caps || position ]

例

フォント合成の無効化

HTML

html
<em class="syn">Synthesize me! 站直。</em>
<br />
<em class="no-syn">Don't synthesize me! 站直。</em>

CSS

css
em {
  font-weight: bold;
}
.syn {
  font-synthesis: style weight small-caps;
}
.no-syn {
  font-synthesis: none;
}

結果

仕様書

Specification
CSS Fonts Module Level 4
# font-synthesis

ブラウザーの互換性

BCD tables only load in the browser

関連情報