font-variant
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
font-variant は CSS の一括指定プロパティで、フォントのすべての変化形を設定することができます。
CSS Level 2 (Revision 1) で定義されたにおける font-variant の <font-variant-css2> 値（つまり、 normal や small-caps）は、一括指定の font を用いて設定することもできます。
試してみましょう
font-variant: normal; font-variant: no-common-ligatures proportional-nums; font-variant: common-ligatures tabular-nums; font-variant: small-caps slashed-zero; <section id="default-example"> <div id="example-element"> <p>Difficult waffles</p> <table> <tr> <td><span class="tabular">0O</span></td> </tr> <tr> <td><span class="tabular">3.14</span></td> </tr> <tr> <td><span class="tabular">2.71</span></td> </tr> </table> </div> </section> @font-face { font-family: "Fira Sans"; src: local("FiraSans-Regular"), url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; } section { font-family: "Fira Sans", sans-serif; margin-top: 10px; font-size: 1.5em; } #example-element table { margin-left: auto; margin-right: auto; } .tabular { border: 1px solid; } 構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
font-variant: small-caps; font-variant: common-ligatures small-caps; /* グローバル値 */ font-variant: inherit; font-variant: initial; font-variant: revert; font-variant: revert-layer; font-variant: unset; 値
normal-
通常のフォントフェイスを定義します。それぞれの個別指定プロパティは
normalの初期値になります。 none-
font-variant-ligaturesをnoneに、その他の個別指定プロパティをnormalに、それぞれの初期値を設定します。 <common-lig-values>,<discretionary-lig-values>,<historical-lig-values>,<contextual-alt-values>-
個別指定の
font-variant-ligaturesプロパティに関するキーワードを指定します。指定可能な値は、common-ligatures,no-common-ligatures,discretionary-ligatures,no-discretionary-ligatures,historical-ligatures,no-historical-ligatures,contextual,no-contextualです。 stylistic(),historical-forms,styleset(),character-variant(),swash(),ornaments(),annotation()-
個別指定の
font-variant-ligaturesプロパティに関するキーワードや特性を指定します。 small-caps,all-small-caps,petite-caps,all-petite-caps,unicase,titling-caps-
個別指定の
font-variant-capsプロパティに関するキーワードや特性を指定します。small-capsの値は、font一括指定プロパティ内で有効な唯一のnormal以外のフォントバリアントです。 <numeric-figure-values>,<numeric-spacing-values>,<numeric-fraction-values>,ordinal,slashed-zero-
個別指定の
font-variant-numericプロパティに関するキーワードを指定します。指定可能な値は、lining-nums,oldstyle-nums,proportional-nums,tabular-nums,diagonal-fractions,stacked-fractions,ordinal,slashed-zeroです。 <east-asian-variant-values>,<east-asian-width-values>,ruby-
個別指定の
font-variant-east-asianプロパティに関するキーワードを指定します。指定可能な値は、jis78,jis83,jis90,jis04,simplified,traditional,full-width,proportional-width,rubyです。 sub,super-
個別指定の
font-variant-positionプロパティに関するキーワードや特性を指定します。 text,emoji,unicode-
個別指定の
font-variant-emojiプロパティに関するキーワードや特性を指定します。
公式定義
| 初期値 | normal |
|---|---|
| 適用対象 | すべての要素とテキスト。 ::first-letterおよび::first-line にも適用されます。 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式定義
font-variant =
normal |
none |
[ [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ] || [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] || [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]
<common-lig-values> =
common-ligatures |
no-common-ligatures
<discretionary-lig-values> =
discretionary-ligatures |
no-discretionary-ligatures
<historical-lig-values> =
historical-ligatures |
no-historical-ligatures
<contextual-alt-values> =
contextual |
no-contextual
<feature-value-name> =
<ident>
<numeric-figure-values> =
lining-nums |
oldstyle-nums
<numeric-spacing-values> =
proportional-nums |
tabular-nums
<numeric-fraction-values> =
diagonal-fractions |
stacked-fractions
<east-asian-variant-values> =
jis78 |
jis83 |
jis90 |
jis04 |
simplified |
traditional
<east-asian-width-values> =
full-width |
proportional-width
例
スモールキャップのフォント変化形の設定
HTML
<p class="normal">Firefox rocks!</p> <p class="small">Firefox rocks!</p> CSS
p.normal { font-variant: normal; } p.small { font-variant: small-caps; } 結果
仕様書
| Specification |
|---|
| CSS Fonts Module Level 4 # font-variant-prop |
| Scalable Vector Graphics (SVG) 2 # FontVariantProperty |