font-variant

CSS の font-variant プロパティは、個別指定プロパティである font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian の一括指定プロパティです。 CSS Level 2 (Revision 1) における font-variant の値(つまり、 normalsmall-caps)は、一括指定の font を用いても設定できます。

font-variant: small-caps;
font-variant: common-ligatures small-caps;

/* グローバル値 */
font-variant: inherit;
font-variant: initial;
font-variant: unset;
初期値normal
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

normal
通常のフォントフェイスを定義します。それぞれの個別指定プロパティは通常の初期値になります。 font-variant の個別指定プロパティは、 font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian です。
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-alternates プロパティに関するキーワードや関数を指定します。
small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps
個別指定の font-variant-caps プロパティに関するキーワードや関数を指定します。
<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 です。

構文形式

normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || 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> ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]

where
<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> = <custom-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;
}

結果

仕様書

仕様書 策定状況 コメント
CSS Fonts Module Level 3
font-variant の定義
勧告候補 新しい font-variant-* プロパティの一括指定になった。
CSS Level 2 (Revision 1)
font-variant の定義
勧告 変更なし
CSS Level 1
font-variant の定義
勧告 初回定義。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
font-variantChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
CSS Fonts Module Level 3 shorthandChrome 完全対応 52Edge 未対応 なしFirefox 完全対応 34
完全対応 34
未対応 33 — 34
無効
無効 From version 33 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 39Safari 完全対応 9.1WebView Android 完全対応 52Chrome Android 完全対応 52Firefox Android 完全対応 34
完全対応 34
未対応 33 — 34
無効
無効 From version 33 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 41Safari iOS 完全対応 9.3Samsung Internet Android 完全対応 あり
Greek accented charactersChrome 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may correctly omit accents in all-uppercase Greek text.
Edge 未対応 なしFirefox 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may correctly omit accents in all-uppercase Greek text.
IE 未対応 なしOpera 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may correctly omit accents in all-uppercase Greek text.
Safari 未対応 なしWebView Android 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may correctly omit accents in all-uppercase Greek.
Chrome Android 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may correctly omit accents in all-uppercase Greek text.
Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may correctly omit accents in all-uppercase Greek text.
Opera Android 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may correctly omit accents in all-uppercase Greek text.
Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may correctly omit accents in all-uppercase Greek.
iİ and ıIChrome 完全対応 31Edge 完全対応 12Firefox 完全対応 14IE 完全対応 4Opera 完全対応 ありSafari 完全対応 8WebView Android 完全対応 ≤37Chrome Android 完全対応 31Firefox Android 完全対応 14Opera Android 完全対応 ありSafari iOS 完全対応 8Samsung Internet Android 完全対応 あり
ßSSChrome 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may capitalize ß as SS.
Edge 未対応 なしFirefox 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may capitalize ß as SS.
IE 未対応 なしOpera 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may capitalize ß as SS.
Safari 未対応 なしWebView Android 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may capitalize ß as SS.
Chrome Android 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may capitalize ß as SS.
Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may capitalize ß as SS.
Opera Android 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may capitalize ß as SS.
Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
補足
未対応 なし
補足
補足 Some operating systems may capitalize ß as SS.

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。