font-variant-numericプロパティ

最終更新日：2023-11-26
公開日：2023-11-07

font-variant-numericプロパティはテキストに含まれる数値や分数などの表示を制御するときに使います。

初期値

normal
継承

継承あり
適用できる要素

全要素とテキスト

font-variant-numericプロパティに指定できる値

font-variant-numericプロパティは「0」をスラッシュ付きの「0」として表示したり、「1st」の「st」を小さく表示するなど、テキストに含まれる数値や分数の表示を制御するときに指定します。
具体的には以下の値を指定することができます。

値	OpenType 対応する値	内容
`normal`		初期値。フォントの標準のまま表示します。
`ordinal`	`ordn`	序数記号に対して特別な表記を使用します。
`slashed-zero`	`zero`	数値の「0」をスラッシュ付きにします。
`lining-nums`	`lnum`	全ての数字をベースラインより上に表示します。
`oldstyle-nums`	`onum`	数字の`3`、`4`、`7`、`9`の表示を下げます。
`proportional-nums`	`pnum`	数字の大きさを揃えずに表示します。
`tabular-nums`	`tnum`	数字の大きさを揃えて表示します。
`diagonal-fractions`	`frac`	分子と分母の数字を小さめに表示し、スラッシュで区切る数字を見やすく表示します。
`stacked-fractions`	`afrc`	分子と分母の数字を小さめに表示し、スラッシュの上下に配置する表記を有効にします。

以降はfont-variant-numericプロパティを使用するコード例とブラウザの表示例を紹介します。

使用例

Googleフォントより公開されている「Source Sans 3」のフォントを使い、数字に対してfont-variant-numericプロパティを指定した例です。
コードの赤いの箇所がfont-variant-numericプロパティの指定と、適用するテキストになります。
（Source Sans 3 - Googleフォント）

CSS コード例

.sample1 section {
  box-sizing: border-box;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
.sample1 section.first {
  border-top: 1px solid #ccc;
}
.sample1 section h2 {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}
.sample1 p {
  font-family: 'SourceSans3', sans-serif;
  font-size: 40px;
}
.sample1 .text1 {
  font-variant-numeric: normal;
}
.sample1 .text2 {
  font-variant-numeric: slashed-zero;
}
.sample1 .text3 {
  font-variant-numeric: tabular-nums;
}
.sample1 .text4 {
  font-variant-numeric: oldstyle-nums;
}
.sample1 .text5 {
  font-variant-numeric: diagonal-fractions;
}
.sample1 .text6 {
  font-variant-numeric: ordinal;
}

HTML コード例

<div class="sample1">
  <section class="first">
    <h2>font-variant-numeric: normal;</h2>
    <p class="text1">0.19 1/3</p>
  </section>
  <section>
    <h2>font-variant-numeric: slashed-zero;</h2>
    <p class="text2">0</p>
  </section>
  <section>
    <h2>font-variant-numeric: tabular-nums;</h2>
    <p class="text3">0.19 1/3</p>
  </section>
  <section>
    <h2>font-variant-numeric: oldstyle-nums;</h2>
    <p class="text4">0.19 1/3</p>
  </section>
  <section>
    <h2>font-variant-numeric: diagonal-fractions;</h2>
    <p class="text5">0.19 1/3</p>
  </section>
  <section>
    <h2>font-variant-numeric: ordinal;</h2>
    <p class="text6">1st 2nd 3rd 4th 5th 10th</p>
  </section>
</div>

以下はブラウザ（Chrome）での表示例です。

記事一覧