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 のプロパティで、数字、分数、序数記号の表記を制御するために使用します。
試してみましょう
font-variant-numeric: normal; font-variant-numeric: slashed-zero; font-variant-numeric: tabular-nums; font-variant-numeric: oldstyle-nums; <section id="default-example"> <div id="example-element"> <table> <tr> <td><span class="tabular">0</span></td> </tr> <tr> <td><span class="tabular">3.14</span></td> </tr> <tr> <td><span class="tabular">2.71</span></td> </tr> </table> </div> </section> @font-face { font-family: "Fira Sans"; src: local("FiraSans-Regular"), url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; } section { font-family: "Fira Sans", sans-serif; margin-top: 10px; font-size: 1.5em; } #example-element table { margin-left: auto; margin-right: auto; } .tabular { border: 1px solid; } 構文
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 |
