font-variant-numeric

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

試してみましょう

構文

css
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: revert;
font-variant-numeric: unset;

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

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

値

normal

このキーワードは、別形式の表記の使用を無効にします。

ordinal

このキーワードは、序数記号に対して特別な表記を使用します。英語では 1st, 2nd, 3rd, 4th、イタリア語では 1a です。 OpenType の ordn の値に対応します。

slashed-zero

このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の zero の値に対応します。

<numeric-figure-values>

これらの値は、数字の形状を制御します。2 つの値が利用できます。

  • lining-nums は、全てをベースライン上に並べる表記を有効にします。 OpenType の lnum の値に対応します。
  • oldstyle-nums は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の onum の値に対応します。
<numeric-spacing-values>

これらの値は、数字の表記の大きさを制御します。2 つの値が利用できます。

  • proportional-nums は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の pnum の値に対応します。
  • tabular-nums は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の tnum の値に対応します。
<numeric-fraction-values>

これらの値は、分数の表示に使う表記を制御します。2 つの値が利用できます。

  • diagonal-fractions は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の frac の値に対応します。
  • stacked-fractions は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の afrc の値に対応します。

公式定義

初期値normal
適用対象すべての要素とテキスト。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

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

<numeric-figure-values> = 
  lining-nums    |
  oldstyle-nums  

<numeric-spacing-values> = 
  proportional-nums  |
  tabular-nums       

<numeric-fraction-values> = 
  diagonal-fractions  |
  stacked-fractions

例

序数形式の設定

仕様書

Specification
CSS Fonts Module Level 4
# font-variant-numeric-prop

ブラウザーの互換性

BCD tables only load in the browser

関連情報