font-variant：フォントの表示形式やブラウザの合成規則を一括で指定する

X
f
LINE
B!
p

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

font-variantプロパティの説明

font-variantは、フォントの表示形式やブラウザの合成規則を一括で指定します。このプロパティ自体は、fontと同じように多数の機能を備えたショートハンド・プロパティです。指定できる値は、以下のプロパティで使用されるものです。

font-variant-alternates：代替字体の選定
font-variant-caps：キャピタライゼーションルールの制御
font-variant-east-asian：東アジア圏の字体の制御
font-variant-ligatures：リガチャの制御
font-variant-numeric：数値の表示形態の制御

font-variantに指定できる値

normal: 通常の字体でフォントを表示します。これが初期値です。
none: font-variant-ligaturesの値をnoneにし、その他のプロパティの値をnormalにします。
<'font-variant-alternates'>値: font-variant-alternatesで制御できる値です。
<'font-variant-caps'>値: font-variant-capsで制御できる値です。
<'font-variant-east-asian'>値: font-variant-east-asianで制御できる値です。
<'font-variant-ligatures'>値: font-variant-ligaturesで制御できる値です。
<'font-variant-numeric'>値: font-variant-numericで制御できる値です。

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

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

CSS

/* キーワード値 */
font-variant: small-caps;
font-variant: common-ligatures;
font-variant: common-ligatures small-caps;

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

font-variantの実例

それでは実際にfont-variantプロパティの書き方を見ていきましょう。以下の例は、英文の小文字に適用される字体をスモールキャップに変換したものです。

表示確認

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;
}
.fv_norm {
	font-variant: normal;
}
.fv_sc {
	font-variant: small-caps;
}

HTML

<section class="samp_box">
	<h2>font-variant</h2>
	<p class="fv_norm">This paragraph is displayed in "normal" value.</p>
	<p class="fv_sc">This paragraph is displayed in "small-caps" value.</p>
</section>