CSS - font-synthesis-position

概要

属性名	font-synthesis-position
値	auto \| none
初期値	auto
適用可能要素	すべての要素およびテキスト
継承	継承する
サポート	https://caniuse.com/mdn-css_properties_font-synthesis-position

説明

使用するフォントが、font-variant-position で指定された上付文字・下付文字をサポートしていない場合、利用可能なフォントから自動生成して表示するか否かをしていします。デフォルトでは自動生成します。現時点(2025年2月)では、Firefox と Safari ではサポートされていますが、Chrome 135、Edge 132、Opera 114 ではサポートされていません。

auto: ブラウザが上付文字・下付文字フォントをを自動生成して表示します。デフォルト値です。
none: ブラウザの自動生成を抑止します。

使用例

下記を Windows の Firefox で確認すると、1つ目の H₂O はブラウザが下付文字を自動生成して表示していますが、2つ目の H₂O は none が指定されて自動生成しなくなっています。

CSS

.my-example {
  font-family: "Arial";
}
.sub {
  font-variant-position: sub;
}
.fsp-none {
  font-synthesis-position: none;
}

HTML

<div class="my-example">
  <div>H<span class="sub">2</span>O</div>
  <div>H<span class="sub fsp-none">2</span>O</div>
</div>

表示

H2O

リンク

初版：2025年2月9日、最終更新：2025年2月9日

https://www.tohoho-web.com/css/prop/font-synthesis-position.htm

CSS - font-synthesis-position

概要

説明

使用例

関連項目

リンク