font-variant-numeric CSS3

font-variant-numeric は、数式の表示形式を指定します。

名前:font-variant-numeric
値: normal |
[<numeric-figure-values>=[ lining-nums | oldstyle-nums ]
||<numeric-spacing-values>=[ proportional-nums | tabular-nums ]
||<numeric-fraction-values>=[ diagonal-fractions | stacked-fractions ]
||ordinal
||slashed-zero
]
初期値:normal
適用対象:全ての要素
継承:する
パーセンテージ:n/a
メディア:visual（視覚的）
計算値:as specified（指定通り）
アニメーション:できない

Value（値）

normal
初期値 標準
lining-nums
ライニング数字（高さの揃った数字）の表示を有効にする。（OpenType機能：lnum）
oldstyle-nums
オールドスタイル数字（旧式の数字）の表示を有効にする。（OpenType機能：onum）
proportional-nums
プロポーショナル数字（文字によって横幅が違う）の表示を有効にする。（OpenType機能：pnum）
tabular-nums
等幅数字の表示を有効にする。（OpenType機能：tnum）
diagonal-fractions
斜め線の分数の表示を有効にする。（OpenType機能：frac）
stacked-fractions
水平線の分数の表示を有効にする。（OpenType機能：afrc）
ordinal
序数付き数字の表示を有効にする。（OpenType機能：ordn）
slashed-zero
スラッシュ（/）付きゼロ（0）の表示を有効にする。（OpenType機能：zero）

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1, .test2 { font-family: Georgia; font-size: 20pt; }
   p.test3, .test4, .test5 { font-family: 'Times New Roman'; font-size: 20pt; }
   p.test6, .test7, .test8, .test9 { font-family: Meiryo, 'Hiragino Kaku Gothic ProN', Candara; font-size: 20pt; }
   p.test1 { font-variant-numeric: normal; }
   p.test2 { font-variant-numeric: lining-nums; }
   p.test3 { font-variant-numeric: oldstyle-nums; }
   p.test4 { font-variant-numeric: proportional-nums; }
   p.test5 { font-variant-numeric: tabular-nums; }
   p.test6 { font-variant-numeric: diagonal-fractions; }
   p.test7 { font-variant-numeric: stacked-fractions; }
   p.test8 { font-variant-numeric: ordinal; }
   p.test9 { font-variant-numeric: slashed-zero; }
  </style>
 </head>
 <body>
   <p class="test1">0123456789</p>
   <p class="test2">0123456789</p>
   <p class="test3">0123456789</p>
   <p class="test4">0123456789</p>
   <p class="test5">0123456789</p>
   <p class="test6">1/2 12/3</p>
   <p class="test7">1/2 12/3</p>
   <p class="test8">1st 17th 2a</p>
   <p class="test9">4000</p>
 </body>
</html>

display

Georgia

0123456789* 通常 *

0123456789* ライニング数字 *

Times New Roman

(0123456789) * 通常 *

0123456789* オールドスタイル *

0123456789* プロポーショナル *

0123456789* 等幅 *

Meiryo, 'Hiragino Kaku Gothic ProN', Candara

1/2 12/3* 斜め線分数 *

1/2 12/3* 水平線分数 *

1st 17th 2a* 序数付き *

4000* スラッシュゼロ *

※ Google Chrome 64.0.3282.186、Firefox58.0.2にて表示確認（2018/3/7）

上に戻る