【CSS Modules】font-variant-numericプロパティの使い方

font-variant-numericプロパティは、数字、分数、および序数標識（例: "1st"の"st"部分）といった数値関連のテキストの表示方法を制御するプロパティです。このプロパティは、OpenTypeフォントが提供する数値に関する高度な組版機能を有効にするために使用されます。

このプロパティには、以下のような値を設定することで、数字の見た目を細かく調整できます。例えば、lining-numsはすべての数字を同じ高さでベースラインに揃えて表示するのに対し、oldstyle-numsは一部の数字（例: 3, 4, 7, 9）をベースラインより下に配置するなど、より本文の小文字に馴染むスタイルで表示します。

数字の幅に関しても、proportional-numsは各数字に適切な可変幅を与えて自然な見た目を実現し、tabular-numsはすべての数字を等幅で表示し、表形式のデータなどで数字の桁を揃えやすくします。

分数の表現では、diagonal-fractionsは斜めのスラッシュを用いて「1/2」のように一般的な形式で表示し、stacked-fractionsは数字を縦に重ねて表現するスタイルを適用します。さらに、ordinalを設定することで「1st」のような序数標識を適切な上付き文字として表示したり、slashed-zeroで数字の「0」にスラッシュを入れて、アルファベットの「O」との混同を避けることが可能です。

このプロパティは、Webページやアプリケーションで表示される数値データを視覚的に整理し、読みやすくするために利用されます。ただし、これらの機能が実際に適用されるには、使用するフォントがそのOpenType機能に対応している必要があります。normalの値は、これらの特別な数値表現を適用しない既定の状態を示します。

Copy
1p {
2  font-variant-numeric: lining-nums tabular-nums stacked-fractions;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません