CSS Fonts の各プロパティを更新

- 2021/11/05 時点の英語版に同期

1 files changed, 65 insertions, 98 deletions

diff --git a/files/ja/web/css/font-variant-numeric/index.md b/files/ja/web/css/font-variant-numeric/index.md
index 9421481409..0503261ad5 100644
--- a/files/ja/web/css/font-variant-numeric/index.md
+++ b/files/ja/web/css/font-variant-numeric/index.md
@@ -6,130 +6,97 @@ tags:
   - CSS フォント
   - CSS プロパティ
   - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.font-variant-numeric
 translation_of: Web/CSS/font-variant-numeric
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>CSS の <strong><code>font-variant-numeric</code></strong> プロパティは、数字、分数、序数記号の表記を制御するために使用します。</p>
+**`font-variant-numeric`** は CSS のプロパティで、数字、分数、序数記号の表記を制御するために使用します。
 
-<div>{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}
 
-<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;
+```css
+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: lining-nums;         /* <numeric-figure-values> */
+font-variant-numeric: oldstyle-nums;       /* <numeric-figure-values> */
+font-variant-numeric: proportional-nums;   /* <numeric-spacing-values> */
+font-variant-numeric: tabular-nums;        /* <numeric-spacing-values> */
+font-variant-numeric: diagonal-fractions;  /* <numeric-fraction-values> */
+font-variant-numeric: stacked-fractions;   /* <numeric-fraction-values> */
 font-variant-numeric: oldstyle-nums stacked-fractions;
 
 /* グローバル値 */
 font-variant-numeric: inherit;
 font-variant-numeric: initial;
+font-variant-numeric: revert;
 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}}
+このプロパティは 2 つの形のうちの 1 つを取ります。
+
+- キーワード値 `normal`
+- 以下の一覧にあるその他の値を空白区切り、自由な順番で
+
+### 値
+
+- `normal`
+  - : このキーワードは、別形式の表記の使用を無効にします。
+- `ordinal`
+  - : このキーワードは、序数記号に対して特別な表記を使用します。英語では 1st, 2nd, 3rd, 4th、イタリア語では 1a です。 OpenType の `ordn` の値に対応します。
+- `slashed-zero`
+  - : このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の `zero` の値に対応します。
+- _\<numeric-figure-values_>
+
+  - : これらの値は、数字の形状を制御します。2 つの値が利用できます。
+
+    - `lining-nums` は、全てをベースライン上に並べる表記を有効にします。 OpenType の `lnum` の値に対応します。
+    - `oldstyle-nums` は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の `onum` の値に対応します。
 
-<h2 id="Examples" name="Examples">例</h2>
+- _\<numeric-spacing-values_>
 
-<h3 id="HTML">HTML</h3>
+  - : これらの値は、数字の表記の大きさを制御します。2 つの値が利用できます。
 
-<pre class="brush: html">&lt;p class="ordinal"&gt;1st, 2nd, 3rd, 4th, 5th&lt;/p&gt;</pre>
+    - `proportional-nums` は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の `pnum` の値に対応します。
+    - `tabular-nums` は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の `tnum` の値に対応します。
 
-<h3 id="CSS">CSS</h3>
+- _\<numeric-fraction-values_>
 
-<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
-*/
+  - : これらの値は、分数の表示に使う表記を制御します。2 つの値が利用できます。
+
+    - `diagonal-fractions` は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の `frac` の値に対応します。
+    - `stacked-fractions` は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の `afrc` の値に対応します。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
 
-@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>
+{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-example.html", '100%', 600)}}
 
-<p>{{EmbedLiveSample('Examples')}}</p>
+## 仕様書
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+{{Specifications}}
 
-<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>
+{{Compat}}
 
-<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの対応</h2>
+## 関連情報
 
-<p>{{Compat("css.properties.font-variant-numeric")}}</p>
+- {{cssxref("font-variant-alternates")}}
+- {{cssxref("font-variant-caps")}}
+- {{cssxref("font-variant-east-asian")}}
+- {{cssxref("font-variant-ligatures")}}
+- {{cssxref("font-variant")}}