CSS - font-synthesis

概要

属性名 font-synthesis
none | [ weight || style || small-caps || position ]
初期値weight style small-caps position
適用可能要素すべての要素
継承継承する
サポートhttps://caniuse.com/mdn-css_properties_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 で指定する上付文字・下付文字フォントをサポートしていない場合、利用可能なフォントから自動生成して表示します。

使用例

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

関連項目

リンク