---
title: font-variant-numeric
slug: Web/CSS/font-variant-numeric
tags:
  - CSS
  - CSS フォント
  - CSS プロパティ
  - リファレンス
translation_of: Web/CSS/font-variant-numeric
---
<div>{{CSSRef}}</div>

<p>CSS の <strong><code>font-variant-numeric</code></strong> プロパティは、数字、分数、序数記号の表記を制御するために使用します。</p>

<div>{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}</div>

<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush:css no-line-numbers">font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums;         /* &lt;numeric-figure-values&gt; */
font-variant-numeric: oldstyle-nums;       /* &lt;numeric-figure-values&gt; */
font-variant-numeric: proportional-nums;   /* &lt;numeric-spacing-values&gt; */
font-variant-numeric: tabular-nums;        /* &lt;numeric-spacing-values&gt; */
font-variant-numeric: diagonal-fractions;  /* &lt;numeric-fraction-values&gt; */
font-variant-numeric: stacked-fractions;   /* &lt;numeric-fraction-values&gt; */
font-variant-numeric: oldstyle-nums stacked-fractions;

/* グローバル値 */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: unset;
</pre>

<p>このプロパティは二つの形のうちの一つを取ります。</p>

<ul>
 <li>キーワード値 <code>normal</code></li>
 <li>以下の一覧にあるその他の値を空白区切り、自由な順番で</li>
</ul>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>このキーワードは、別形式の表記の使用を無効にします。</dd>
 <dt><code>ordinal</code></dt>
 <dd>このキーワードは、序数記号に対して特別な表記を使用します。英語では 1<sup>st</sup>, 2<sup>nd</sup>, 3<sup>rd</sup>, 4<sup>th</sup>、イタリア語では 1<sup>a</sup> です。 OpenType の <code>ordn</code> の値に対応します。</dd>
 <dt><code>slashed-zero</code></dt>
 <dd>このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の <code>zero</code> の値に対応します。</dd>
 <dt><em>&lt;numeric-figure-values</em>&gt;</dt>
 <dd>これらの値は、数字の形状を制御します。二つの値が利用できます。
 <ul>
  <li><code>lining-nums</code> は、全てをベースライン上に並べる表記を有効にします。 OpenType の <code>lnum</code> の値に対応します。</li>
  <li><code>oldstyle-nums</code> は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の <code>onum</code> の値に対応します。</li>
 </ul>
 </dd>
 <dt><em>&lt;numeric-spacing-values</em>&gt;</dt>
 <dd>これらの値は、数字の表記の大きさを制御します。二つの値が利用できます。
 <ul>
  <li><code>proportional-nums</code> は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の <code>pnum</code> の値に対応します。</li>
  <li><code>tabular-nums</code> は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の <code>tnum</code> の値に対応します。</li>
 </ul>
 </dd>
 <dt><em>&lt;numeric-fraction-values</em>&gt;</dt>
 <dd>これらの値は、分数の表示に使う表記を制御します。二つの値が利用できます。
 <ul>
  <li><code>diagonal-fractions</code> は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の <code>frac</code> の値に対応します。</li>
  <li><code>stacked-fractions</code> は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の <code>afrc</code> の値に対応します。</li>
 </ul>
 </dd>
</dl>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p class="ordinal"&gt;1st, 2nd, 3rd, 4th, 5th&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">/*
This example uses the Source Sans Pro OpenType font, developed by Adobe
and used here under the terms of the SIL Open Font License, Version 1.1:
http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
*/

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
}

.ordinal {
  font-variant-numeric: ordinal;
  font-family: "Source Sans Pro";
}
</pre>

<h3 id="Result" name="Result">結果</h3>

<p>{{EmbedLiveSample('Examples')}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>仕様書</th>
   <th>状況</th>
   <th>備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの対応</h2>

<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>

<p>{{Compat("css.properties.font-variant-numeric")}}</p>