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 |
ブラウザーの互換性
Loading…