CSS の font-variant-numeric プロパティは、数字、分数、序数記号の表記を制御するために使用します。

構文

font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums;         /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums;       /* <numeric-figure-values> */
font-variant-numeric: proportional-nums;   /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums;        /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions;  /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions;   /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions;

/* グローバル値 */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: unset;

このプロパティは二つの形のうちの一つを取ります。

  • キーワード値 normal
  • 以下の一覧にあるその他の値を空白区切り、自由な順番で

normal
このキーワードは、別形式の表記の使用を無効にします。
ordinal
このキーワードは、序数記号に対して特別な表記を使用します。英語では 1st, 2nd, 3rd, 4th、イタリア語では 1a です。 OpenType の ordn の値に対応します。
slashed-zero
このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の zero の値に対応します。
<numeric-figure-values>
これらの値は、数字の形状を制御します。二つの値が利用できます。
  • lining-nums は、全てをベースライン上に並べる表記を有効にします。 OpenType の lnum の値に対応します。
  • oldstyle-nums は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の onum の値に対応します。
<numeric-spacing-values>
これらの値は、数字の表記の大きさを制御します。二つの値が利用できます。
  • proportional-nums は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の pnum の値に対応します。
  • tabular-nums は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の tnum の値に対応します。
<numeric-fraction-values>
これらの値は、分数の表示に使う表記を制御します。二つの値が利用できます。
  • diagonal-fractions は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の frac の値に対応します。
  • stacked-fractions は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の afrc の値に対応します。

形式文法

normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]

where
<numeric-figure-values> = [ lining-nums | oldstyle-nums ]
<numeric-spacing-values> = [ proportional-nums | tabular-nums ]
<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]

HTML

<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>

CSS

/*
This example uses the Source Sans Pro OpenType font, developed by Adobe
and used here under the terms of the SIL Open Font License, Version 1.1:
http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
*/

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
}

.ordinal {
  font-variant-numeric: ordinal;
  font-family: "Source Sans Pro";
}

結果

仕様書

仕様書 状況 備考
CSS Fonts Module Level 3
font-variant-numeric の定義
勧告候補 初回定義

初期値normal
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法における値の出現順

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 52Edge 未対応 なしFirefox 完全対応 34
完全対応 34
未対応 24 — 34
無効
無効 From version 24 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 完全対応 52Edge Mobile 未対応 なしFirefox Android 完全対応 34
完全対応 34
未対応 24 — 34
無効
無効 From version 24 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 完全対応 39Safari iOS 完全対応 ありSamsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,