font-variant-numericで数値の表現方法を指定する

## font-variant-numericとは

[`font-variant-numeric`](https://drafts.csswg.org/css-fonts/#font-variant-numeric-prop)は、フォントの数字の表現方法を指定するCSSプロパティです。
[caniuse](https://caniuse.com/font-variant-numeric)によるとすべてのモダンブラウザで利用可能です。
このプロパティを使用することで、フォントの数字のスタイルを変更できます。
![スクリーンショット 2023-07-18 14.40.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/924d88bf-a5af-9503-c7a1-5eff770341a6.png)

## font-variant-numericの使用方法
`font-variant-numeric`は、`normal`、`ordinal`、`slashed-zero`、`lining-nums`、`oldstyle-nums`、`proportional-nums`、`tabular-nums`、`diagonal-fractions`、`stacked-fractions`のいずれかの値を取ります。
例えば、以下のようにして使用します。
```css
p {
  font-variant-numeric: lining-nums;
}
```
この例では、段落内の数字が`lining-nums`で定義された表示に変更されます。

## font-variant-numericの各値について
デフォルトのフォントでは表現がわかりにくいので、サンプルは`Source Sans Pro`を利用しました。
- `normal`: フォントのデフォルトの数字表現
<p class="codepen" data-height="300" data-slug-hash="ExOLKvQ" data-user="kokisakano" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kokisakano/pen/ExOLKvQ">
  Untitled</a> by KokiSakano (<a href="https://codepen.io/kokisakano">@kokisakano</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- `ordinal`: フォントが持つ序数の表現
<p class="codepen" data-height="300" data-slug-hash="MWzGyEm" data-user="kokisakano" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kokisakano/pen/MWzGyEm">
  slashed-zero</a> by KokiSakano (<a href="https://codepen.io/kokisakano">@kokisakano</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- `slashed-zero`: 0の上に斜線(フォントによっては射線とは違う形で表現される)
<p class="codepen" data-height="300" data-slug-hash="mdQLPOg" data-user="kokisakano" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kokisakano/pen/mdQLPOg">
  Untitled</a> by KokiSakano (<a href="https://codepen.io/kokisakano">@kokisakano</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- `lining-nums`: 高さが揃った数値
- `oldstyle-nums`: 高さがバラバラな周りの小文字のアルファベットに馴染む数値
<p class="codepen" data-height="300" data-slug-hash="wvQjGxG" data-user="kokisakano" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kokisakano/pen/wvQjGxG">
  lining-nums</a> by KokiSakano (<a href="https://codepen.io/kokisakano">@kokisakano</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- `proportional-nums`: 数字の幅がバラバラ
- `tabular-nums`: 数字の幅が均等
<p class="codepen" data-height="300" data-slug-hash="RwqyazN" data-user="kokisakano" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kokisakano/pen/RwqyazN">
  figure</a> by KokiSakano (<a href="https://codepen.io/kokisakano">@kokisakano</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- `diagonal-fractions`: 斜めで人まとまりの分数
- `stacked-fractions`: 横に数値と射線を積み重ねた分数
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ExOLyPG" data-user="kokisakano" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kokisakano/pen/ExOLyPG">
  figure</a> by KokiSakano (<a href="https://codepen.io/kokisakano">@kokisakano</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>