font-variant:フォントの表示形式やブラウザの合成規則を一括で指定する
初期値 | 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>
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 | 文字フォントの太さを指定する |