font-variant-position：上付き文字や下付き文字として配置されるべき字体の使用を制御する

X
f
LINE
B!
p

初期値	`normal`
適用対象	全ての要素、`::first-letter`および`::first-line`
継承	する
アニメーション	離散値
対応ブラウザ	caniuseで確認

font-variant-positionプロパティの説明

font-variant-positionは、下付き文字や上付き文字として配置されるべき字体の使用を制御します。これらの字体は<sub>や<sup>で囲われた範囲に表示されるもので、フォントのベースラインから相対的な位置に配置されます。

font-variant-positionに指定できる値

normal: 下付き文字および上付き文字の代替グリフを無効にします。これが初期値です。
sub: 下付き文字の代替グリフを有効にします。指定された範囲の中にこれが利用できない文字が含まれる場合は、範囲全体の文字が合成によって描画されます。
super: 上付き文字の代替グリフを有効にします。指定された範囲の中にこれが利用できない文字が含まれる場合は、範囲全体の文字が合成によって描画されます。

font-variant-positionの使い方とサンプル

font-variant-positionプロパティの構文は以下の通りです。

CSS

/* キーワード値 */
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;

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

font-variant-positionの実例

それでは実際にfont-variant-positionプロパティの書き方を見ていきましょう。段落に含まれる文字列の一部に個別の値を指定してみます。対応していないブラウザでは変化が見られません。

表示確認

CSS

.samp_box {
	overflow: auto;
	width: 100%;
	margin-top: 1rem;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box p {
	margin: 1rem 0 0;
	padding: .3rem;
	background-color: #fff;
}
.samp_box span {
	background-color: #ffc;
}
.fvp_norm {
	font-variant-position: normal;
}
.fvp_sub {
	font-variant-position: sub;
}
.fvp_super {
	font-variant-position: super;
}

HTML

<section class="samp_box">
	<h2>font-variant-position</h2>
	<p>この段落は <span class="fvp_norm">normal</span> のテストです。</p>
	<p>この段落は <span class="fvp_sub">sub</span> のテストです。</p>
	<p>この段落は <span class="fvp_super">super</span> のテストです。</p>
</section>