このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 2020年1月.
font-variant-numeric はCSS のプロパティで、数字、分数、序数記号の表記を制御するために使用します。
試してみましょう
font-variant-numeric: normal;font-variant-numeric: ordinal;font-variant-numeric: slashed-zero;font-variant-numeric: tabular-nums;font-variant-numeric: oldstyle-nums;font-variant-numeric: lining-nums;font-variant-numeric: proportional-nums;font-variant-numeric: diagonal-fractions;<section> <div> <table> <tbody> <tr> <td><span>0</span></td> </tr> <tr> <td><span>3.54</span></td> </tr> <tr> <td><span>1.71</span></td> </tr> <tr> <td><span>1st</span></td> </tr> <tr> <td><span>3/4</span></td> </tr> </tbody> </table> </div></section>@font-face { font-family: "Source Sans Pro"; src: local("SourceSansPro-Regular"), url("/shared-assets/fonts/SourceSansPro-Regular.otf") format("opentype"); font-weight: normal; font-style: normal;}section { font-family: "Source Sans Pro", 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>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: normal; font-style: normal;}.ordinal { font-family: "Source Sans Pro", sans-serif; font-size: 2rem; font-variant-numeric: ordinal;}仕様書
| Specification |
|---|
| CSS Fonts Module Level 4 # font-variant-numeric-prop |