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

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

1 files changed, 145 insertions, 297 deletions

diff --git a/files/ja/web/css/font-weight/index.md b/files/ja/web/css/font-weight/index.md
index 66b685f51b..75d0cf888f 100644
--- a/files/ja/web/css/font-weight/index.md
+++ b/files/ja/web/css/font-weight/index.md
@@ -3,23 +3,23 @@ title: font-weight
 slug: Web/CSS/font-weight
 tags:
   - CSS
-  - CSS Fonts
-  - CSS Property
-  - Reference
-  - 'recipe:css-property'
+  - CSS フォント
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.font-weight
 translation_of: Web/CSS/font-weight
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>font-weight</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている {{cssxref("font-family")}} に依存する場合があります。</p>
+**`font-weight`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている {{cssxref("font-family")}} に依存する場合があります。
 
-<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-weight.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 font-weight: normal;
 font-weight: bold;
 
@@ -41,300 +41,171 @@ font-weight: 900;
 /* グローバル値 */
 font-weight: inherit;
 font-weight: initial;
+font-weight: revert;
 font-weight: unset;
-</pre>
-
-<p><code>font-weight</code> プロパティは、以下の一覧から選択した単一のキーワードで指定します。</p>
-
-<h3 id="Values" name="Values">値</h3>
+```
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>通常のフォントの太さです。 <code>400</code> と同じです。</dd>
- <dt><code>bold</code></dt>
- <dd>太字のフォントの太さです。 <code>700</code> と同じです。</dd>
- <dt><code>lighter</code></dt>
- <dd>フォントの太さが親要素よりも相対的に1つ細くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。</dd>
- <dt><code>bolder</code></dt>
- <dd>フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>1 以上 1000 以下の {{cssxref("&lt;number&gt;")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の<a href="#Common_weight_name_mapping">一般的な太さ名との対応</a>にあるように、共通の太さ名に対応しています。</dd>
-</dl>
+`font-weight` プロパティは、以下の一覧から選択した単一のキーワードで指定します。
 
-<p><code>font-weight</code> 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は{{anch("Fallback weights", "太さのフォールバック")}}の仕組みを用いて、これらの値のいずれかに変換されます。</p>
+### 値
 
-<p>CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。</p>
+- `normal`
+  - : 通常のフォントの太さです。 `400` と同じです。
+- `bold`
+  - : 太字のフォントの太さです。 `700` と同じです。
+- `lighter`
+  - : フォントの太さが親要素よりも相対的に 1 つ細くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。
+- `bolder`
+  - : フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。
+- `<number>`
+  - : 1 以上 1000 以下の {{cssxref("&lt;number&gt;")}} 値です。数値が大きいと、数値が小さいものより太さが太い (または等しい) ことを表します。よく使用される値は、以下の[一般的な太さ名との対応](#一般的な太さ名との対応)にあるように、共通の太さ名に対応しています。
 
-<h3 id="Fallback_weights" name="Fallback_weights">太さのフォールバック</h3>
+`font-weight` 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は{{anch("太さの代替")}}の仕組みを用いて、これらの値のいずれかに変換されます。
 
-<p>ちょうど一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。</p>
+CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。
 
-<ul>
- <li>対象となる太さがが <code>400</code>～<code>500</code> で指定された場合
+### 太さの代替
 
-  <ul>
-   <li>利用できる太さを、対象値から <code>500</code> までの間で昇順で探します。</li>
-   <li>一致するものがなければ、対象値未満の利用できる太さを降順で探します。</li>
-   <li>一致するものがなければ、 <code>500</code> より大きい太さを昇順で探します。</li>
-  </ul>
- </li>
- <li>太さが <code>400</code> 未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。</li>
- <li>太さが <code>500</code> より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。</li>
-</ul>
+正確に一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。
 
-<h3 id="Meaning_of_relative_weights" name="Meaning_of_relative_weights">相対的な太さの意味</h3>
+- 対象となる太さがが `400`～`500` で指定された場合
 
-<p>以下の表は、 <code>lighter</code> または <code>bolder</code> を指定する場合に要素の絶対的な太さを算出する方法を示しています。</p>
+  - 利用できる太さを、対象値から `500` までの間で昇順で探します。
+  - 一致するものがなければ、対象値未満の利用できる太さを降順で探します。
+  - 一致するものがなければ、 `500` より大きい太さを昇順で探します。
 
-<p>なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。</p>
+- 太さが `400` 未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。
+- 太さが `500` より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>継承値</th>
-   <th><code>bolder</code></th>
-   <th><code>lighter</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th>100</th>
-   <td>400</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>200</th>
-   <td>400</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>300</th>
-   <td>400</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>400</th>
-   <td>700</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>500</th>
-   <td>700</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>600</th>
-   <td>900</td>
-   <td>400</td>
-  </tr>
-  <tr>
-   <th>700</th>
-   <td>900</td>
-   <td>400</td>
-  </tr>
-  <tr>
-   <th>800</th>
-   <td>900</td>
-   <td>700</td>
-  </tr>
-  <tr>
-   <th>900</th>
-   <td>900</td>
-   <td>700</td>
-  </tr>
- </tbody>
-</table>
+### 相対的な太さの意味
 
-<h3 id="Common_weight_name_mapping" name="Common_weight_name_mapping">一般的な太さ名との対応</h3>
+以下の表は、 `lighter` または `bolder` を指定する場合に要素の絶対的な太さを算出する方法を示しています。
 
-<p><code>100</code> から <code>900</code> の数値は、おおよそ以下の太さ名に対応します (<a href="https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass">OpenType 仕様書</a>を参照してください)。</p>
+なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">値</th>
-   <th scope="col">太さ名</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>100</td>
-   <td>Thin (Hairline)</td>
-  </tr>
-  <tr>
-   <td>200</td>
-   <td>Extra Light (Ultra Light)</td>
-  </tr>
-  <tr>
-   <td>300</td>
-   <td>Light</td>
-  </tr>
-  <tr>
-   <td>400</td>
-   <td>Normal (Regular)</td>
-  </tr>
-  <tr>
-   <td>500</td>
-   <td>Medium</td>
-  </tr>
-  <tr>
-   <td>600</td>
-   <td>Semi Bold (Demi Bold)</td>
-  </tr>
-  <tr>
-   <td>700</td>
-   <td>Bold</td>
-  </tr>
-  <tr>
-   <td>800</td>
-   <td>Extra Bold (Ultra Bold)</td>
-  </tr>
-  <tr>
-   <td>900</td>
-   <td>Black (Heavy)</td>
-  </tr>
-  <tr>
-   <td>950</td>
-   <td><a href="https://docs.microsoft.com/en-us/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks">Extra Black (Ultra Black)</a></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th>継承値</th>
+      <th><code>bolder</code></th>
+      <th><code>lighter</code></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>100</th>
+      <td>400</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>200</th>
+      <td>400</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>300</th>
+      <td>400</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>400</th>
+      <td>700</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>500</th>
+      <td>700</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>600</th>
+      <td>900</td>
+      <td>400</td>
+    </tr>
+    <tr>
+      <th>700</th>
+      <td>900</td>
+      <td>400</td>
+    </tr>
+    <tr>
+      <th>800</th>
+      <td>900</td>
+      <td>700</td>
+    </tr>
+    <tr>
+      <th>900</th>
+      <td>900</td>
+      <td>700</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Variable_fonts" name="Variable_fonts">可変フォント</h3>
-
-<p>多くのフォントは、<a href="#Common_weight_name_mapping">一般的な太さ名との対応</a>の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。</p>
-
-<p>TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。</p>
-
-<p>以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。</p>
-
-<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div>
-
-<h4 id="HTML">HTML</h4>
-
-<div id="variable-font-example">
-<pre class="brush: html notranslate">&lt;header&gt;
-    &lt;input type="range" id="weight" name="weight" min="1" max="1000" /&gt;
-    &lt;label for="weight"&gt;Weight&lt;/label&gt;
-&lt;/header&gt;
-&lt;div class="container"&gt;
-    &lt;p class="sample"&gt;...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css notranslate">/*
-Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
-and is used here under the terms of its license:
-https://github.com/LettError/mutatorSans/blob/master/LICENSE
-*/
-
-@font-face {
-  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
-  font-family:'MutatorSans';
-  font-style: normal;
-}
-
-label {
-  font: 1rem monospace;
-  white-space: nowrap;
-}
-
-.container {
-  max-height: 150px;
-  overflow-y: auto;
-}
-
-.sample {
-  text-transform: uppercase;
-  font: 1.5rem 'MutatorSans', sans-serif;
-}
-</pre>
+### 一般的な太さ名との対応
 
-<div class="hidden">
-<pre class="brush: css notranslate">html, body {
-  max-height: 100vh;
-  max-width: 100vw;
-  overflow: hidden;
-}
+`100` から `900` の数値は、おおよそ以下の太さ名に対応します ([OpenType 仕様書](https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass)を参照してください)。
 
-body {
-  display: flex;
-  flex-direction: column;
-}
+| 値  | 太さ名                                                                                                                |
+| --- | --------------------------------------------------------------------------------------------------------------------------------- |
+| 100 | Thin (Hairline)                                                                                                                   |
+| 200 | Extra Light (Ultra Light)                                                                                                         |
+| 300 | Light                                                                                                                             |
+| 400 | Normal (Regular)                                                                                                                  |
+| 500 | Medium                                                                                                                            |
+| 600 | Semi Bold (Demi Bold)                                                                                                             |
+| 700 | Bold                                                                                                                              |
+| 800 | Extra Bold (Ultra Bold)                                                                                                           |
+| 900 | Black (Heavy)                                                                                                                     |
+| 950 | [Extra Black (Ultra Black)](https://docs.microsoft.com/en-us/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks) |
 
-header {
-  margin-bottom: 1.5rem;
-}
+### 可変フォント
 
-.container {
-  flex-grow: 1;
-}
+多くのフォントは、[一般的な太さ名との対応](#一般的な太さ名との対応)の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高いまたは低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。
 
-.container &gt; p {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-</pre>
-</div>
+TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。
 
-<h4 id="JavaScript">JavaScript</h4>
+以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。
 
-<pre class="brush: js notranslate">let weightLabel = document.querySelector('label[for="weight"]');
-let weightInput = document.querySelector('#weight');
-let sampleText = document.querySelector('.sample');
+{{EmbedGHLiveSample("css-examples/variable-fonts/font-weight.html", '100%', 860)}}
 
-function update() {
-  weightLabel.textContent = `font-weight: ${weightInput.value};`;
-  sampleText.style.fontWeight = weightInput.value;
-}
+## アクセシビリティの考慮
 
-weightInput.addEventListener('input', update);
+弱視の人は、 `font-weight` の値が `100` (Thin/Hairline) または `200` (Extra Light) の場合、特にフォントの[コントラスト比が低い場合](/ja/docs/Web/CSS/color#accessibility_concerns)は、テキストを読むのが難しくなることがあります。
 
-update();
-</pre>
-</div>
+- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+## 公式定義
 
-<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/ja/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p>
+{{cssinfo}}
 
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式定義
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Setting_font_weights">Setting font weights</h3>
+<h3 id="Setting_font_weights">フォントの太さの設定</h3>
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;p&gt;
+```html
+<p>
   Alice was beginning to get very tired of sitting by her sister on the
   bank, and of having nothing to do: once or twice she had peeped into the
   book her sister was reading, but it had no pictures or conversations in
   it, "and what is the use of a book," thought Alice "without pictures or
   conversations?"
-&lt;/p&gt;
+</p>
 
-&lt;div&gt;I'm heavy&lt;br/&gt;
-  &lt;span&gt;I'm lighter&lt;/span&gt;
-&lt;/div&gt;
-</pre>
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush:css notranslate">/* 段落のテキストを太字にします */
+```css
+/* 段落のテキストを太字にします */
 p {
   font-weight: bold;
 }
@@ -349,46 +220,23 @@ div {
    1 段階細くします */
 span {
   font-weight: lighter;
-}</pre>
+}
+```
 
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
 
-<p>{{EmbedLiveSample("Setting_font_weights","400","300")}}</p>
+{{EmbedLiveSample("Setting_font_weights","400","300")}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td><code>font-weight</code> で 1～1000 の任意の数を受け付けるよう定義。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## 関連情報
 
-<p>{{Compat("css.properties.font-weight")}}</p>
+- {{cssxref("font-style")}}
+- {{cssxref("font-family")}}
+- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals)