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

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

font-variantプロパティの説明

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

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>

font-variantに関連するCSSプロパティ

フォント・文字色
color 文字の色を指定する
font フォントに関する様々な機能を一括で指定する
font-family 文字フォントの種類を指定する
font-feature-settings OpenTypeフォントの拡張書体の特性を制御する
font-kerning フォントの文字詰め(カーニング)を制御する
font-language-override 文字を表示する祭に使用する言語情報を一時的に変更する
font-size 文字フォントの大きさを指定する
font-size-adjust 現在のフォントサイズを基準に小文字の大きさを相対的に調整する
font-stretch 表示させるフォントの幅広や幅狭のフェイスを指定する
font-style フォントを筆記体や斜体で表示するかどうかを指定する
font-synthesis 太字や斜体に対応していないフォントの加工を制御する
font-variant フォントの表示形式やブラウザの合成規則を一括で指定する
font-variant-alternates 文字フォントの代替字体(グリフ)の選定を制御する
font-variant-caps 文字列に適用されるキャピタライゼーションルールを制御する
font-variant-east-asian 東アジアの言語で使われる字体を制御する
font-variant-ligatures 隣り合った文字フォントの合字(リガチャ)を制御する
font-variant-numeric 数値に関する文字表記を制御する
font-variant-position 上付き文字や下付き文字として配置されるべき字体の使用を制御する
font-weight 文字フォントの太さを指定する