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 July 2015.

* Some parts of this feature may have varying levels of support.

font-variant は CSS の一括指定プロパティで、フォントのすべての変化形を設定することができます。

CSS Level 2 (Revision 1) で定義されたにおける font-variant<font-variant-css2> 値(つまり、 normalsmall-caps)は、一括指定の font を用いて設定することもできます。

試してみましょう

構成要素のプロパティ

構文

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-ligaturesnone に、その他の個別指定プロパティを 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

html
<p class="normal">Firefox rocks!</p>
<p class="small">Firefox rocks!</p>

CSS

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-variant
CSS Fonts Module Level 3 shorthand
Greek accented characters
historical-forms
none
normal
sub
super
iİ and ıI
ßSS

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

関連情報