font-variantプロパティの説明
CSSのfont-variantプロパティは、フォントの表示形式やブラウザの合成規則を一括で指定します。このプロパティ自体は、fontと同じように多数の機能を備えたショートハンド・プロパティです。指定できる値は、以下のプロパティで使用されるものです。
font-variant-alternates：代替字体の選定font-variant-caps：キャピタライゼーションルールの制御font-variant-east-asian：東アジア圏の字体の制御font-variant-ligatures：リガチャの制御font-variant-numeric：数値の表示形態の制御
font-variantに指定できる値
normal- 通常の字体でフォントを表示します。これが初期値です。
nonefont-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プロパティの構文は以下の通りです。
/* キーワード値 */
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プロパティの書き方を見ていきましょう。以下の例は、英文の小文字に適用される字体をスモールキャップに変換したものです。
<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>
.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;
}