CSS - font-synthesis

• トップ
• CSSリファレンス
• font-synthesis

概要

説明

font-synthesis-weight, font-synthesis-style, font-synthesis-small-caps, font-synthesis-position の一括指定(ショートハンド)プロパティです。使用するフォントが太さ、斜体等のスタイル、スモールキャプス文字、上付/下付文字をサポートしていない場合に、ブラウザが標準フォントをベースにこれらのフォントを自動性正するか否かを指定します。デフォルトでは自動生成します。none を指定することにより自動生成しないように制御することができます。

この値を none にすることにより、どのフォントが足りていないか(自動生成されているか)が判別できるようになり、より読みやすいフォントを指定することでページの可読性を高めることができます。

none

ブラウザが太字や斜体などのフォントを自動生成することを抑止します。

weight

使用するフォントが、font-weight で指定する太さの太字をサポートしていない場合、利用可能なフォントから自動生成して表示します。

style

使用するフォントが、font-style で指定する斜体などのスタイルをサポートしていない場合、利用可能なフォントから自動生成して表示します。

small-caps

使用するフォントが、font-variant-caps で指定するスモールキャプスフォントをサポートしていない場合、利用可能なフォントから自動生成して表示します。

position

使用するフォントが、font-variant-position で指定する上付文字・下付文字フォントをサポートしていない場合、利用可能なフォントから自動生成して表示します。

使用例

.bold-sample {
  font-weight: bold;
  font-synthesis: none;
}

関連項目

• font-synthesis-weight
• font-synthesis-style
• font-synthesis-small-caps
• font-synthesis-position

リンク

• https://drafts.csswg.org/css-fonts/#font-synthesis
• https://developer.mozilla.org/ja/docs/Web/CSS/font-synthesis
• https://caniuse.com/mdn-css_properties_font-synthesis