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: revert-layer;
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
例
序数形式の設定
以下のコードブロック内の "Play" をクリックすると、 MDN Playground で例を編集できます。
html
<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>
css
@font-face {
font-family: "Source Sans Pro";
src: url("https://mdn.github.io/shared-assets/fonts/SourceSansPro-Regular.otf")
format("opentype");
font-weight: 400;
font-style: normal;
}
.ordinal {
font-family: "Source Sans Pro";
font-size: 2rem;
font-variant-numeric: ordinal;
}
仕様書
Specification |
---|
CSS Fonts Module Level 4 # font-variant-numeric-prop |
ブラウザーの互換性
BCD tables only load in the browser