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

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

1 files changed, 61 insertions, 169 deletions

diff --git a/files/ja/web/css/font-style/index.md b/files/ja/web/css/font-style/index.md
index 339426e6c0..93a5e965bd 100644
--- a/files/ja/web/css/font-style/index.md
+++ b/files/ja/web/css/font-style/index.md
@@ -5,24 +5,25 @@ tags:
   - CSS
   - CSS フォント
   - CSS プロパティ
-  - Reference
-  - font
+  - リファレンス
   - ウェブ
+  - font
+  - recipe:css-property
+browser-compat: css.properties.font-style
 translation_of: Web/CSS/font-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>font-style</code></strong> プロパティは、フォントが {{cssxref("font-family")}} の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどれでスタイル付けするかを設定します。</span></p>
+**`font-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{cssxref("font-family")}} の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどのスタイルにするか設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-style.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+**italic** フォントフェイスは通常、本質的に筆記体であり、装飾されていない書体より水平方向の幅が小さいのが一般的です。一方 **oblique** フェイスはたいてい、通常のフェイスを傾けただけです。 italic と oblique のいずれも、通常のフェイスの字形を人工的に傾けることによってシミュレートされます (この制御については {{cssxref("font-synthesis")}} をご覧ください)。
 
-<p><strong>italic</strong> フォントフェイスは通常、本質的に筆記体であり、スタイル付けされていない書体より水平方向の幅が小さいのが一般的です。一方 <strong>oblique</strong> フェイスはたいてい、通常のフェイスを傾けただけです。 italic と oblique のいずれも、通常のフェイスのグリフを人工的に傾けることによってシミュレートされます (この制御については {{cssxref("font-synthesis")}} をご覧ください)。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers">font-style: normal;
+```css
+font-style: normal;
 font-style: italic;
 font-style: oblique;
 font-style: oblique 10deg;
@@ -30,196 +31,87 @@ font-style: oblique 10deg;
 /* グローバル値 */
 font-style: inherit;
 font-style: initial;
+font-style: revert;
 font-style: unset;
-</pre>
+```
 
-<p><code>font-style</code> プロパティは、以下の一覧から選択した単一のキーワードで指定し、キーワードが <code>oblique</code> であれば任意で角度を含めることができます。</p>
+`font-style` プロパティは、以下の一覧から選択した単一のキーワードで指定し、キーワードが `oblique` であれば任意で角度を含めることができます。
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>{{Cssxref("font-family")}} の中で <code>normal</code> に分類されているフォントを選択します。</dd>
- <dt><code>italic</code></dt>
- <dd><code>italic</code> として分類されているフォントを選択します。 italic フェイスが使用できない場合は、代わりに <code>oblique</code> に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。</dd>
- <dt><code>oblique</code></dt>
- <dd><code>oblique</code> として分類されているフォントを選択します。 oblique フェイスが使用できない場合は、代わりに <code>italic</code> に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。</dd>
- <dt><code>oblique</code> <code><a href="/ja/docs/Web/CSS/angle">&lt;angle&gt;</a></code></dt>
- <dd><code>oblique</code> として分類されているフォントを選択し、加えてテキストの傾きの角度を指定します。選択されたフォントファミリで１つまたは複数の oblique フェイスが利用できる場合、指定した角度に最も近いものが選択されます。 oblique フェイスが利用できない場合、ブラウザーは通常のフェイスを指定した大きさだけ傾けることで、 oblique バージョンを作成します。有効な値は-90以上90以下の角度の値です。角度が指定されない場合、14度の角度が使用されます。正の数では行末に向けて傾け、負の数では行頭に向けて傾けます。<br>
- <br>
- 一般に、要求された角度が14度以上の場合、大きな角度が推奨されます。その他の場合は、より小さい角度が推奨されます (アルゴリズムの詳細は、仕様書の <a href="https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm">font matching section</a> を参照してください)。</dd>
-</dl>
+- `normal`
+  - : {{Cssxref("font-family")}} の中で `normal` に分類されているフォントを選択します。
+- `italic`
+  - : `italic` として分類されているフォントを選択します。 italic フェイスが使用できない場合は、代わりに `oblique` に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。
+- `oblique`
+  - : `oblique` として分類されているフォントを選択します。 oblique フェイスが使用できない場合は、代わりに `italic` に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。
+- `oblique` [`<angle>`](/ja/docs/Web/CSS/angle)
 
-<h3 id="Variable_fonts" name="Variable_fonts">可変フォント</h3>
+  - : `oblique` として分類されているフォントを選択し、加えてテキストの傾きの角度を指定します。選択されたフォントファミリで１つまたは複数の oblique フェイスが利用できる場合、指定した角度に最も近いものが選択されます。 oblique フェイスが利用できない場合、ブラウザーは通常のフェイスを指定した大きさだけ傾けることで、 oblique バージョンを作成します。有効な値は-90以上90以下の角度の値です。角度が指定されない場合、14度の角度が使用されます。正の数では行末に向けて傾け、負の数では行頭に向けて傾けます。
 
-<p>可変フォントでは、 oblique フェイスをどれだけ傾けるかの角度を細かく制御することができます。 <code>oblique</code> キーワードに <code>&lt;angle&gt;</code> 修飾子を使用して選択することができます。</p>
+    一般に、要求された角度が14度以上の場合、大きな角度が推奨されます。その他の場合は、より小さい角度が推奨されます (アルゴリズムの詳細は、仕様書の [font matching section](https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm) を参照してください)。
 
-<p>TrueType または OpenType の可変フォントでは、 <code>"slnt"</code> 変数が oblique の傾く角度を様々に実装するために使用され、 <code>"ital"</code> 変数の値が 1 ならば、 italic の値を使用します。 {{cssxref("font-variation-settings")}} を参照してください。</p>
+### 可変フォント
 
-<p>次の例を動作させるには、 CSS Fonts Level 4 の <code>font-style: oblique</code> が <code>&lt;angle&gt;</code> を受け入れる構文に対応したブラウザーが必要です。</p>
+可変フォントでは、 oblique フェイスをどれだけ傾けるかの角度を細かく制御することができます。 `<angle>` 修飾子を `oblique` キーワードに使用して選択することができます。
 
-<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div>
+TrueType または OpenType の可変フォントでは、 `"slnt"` 変数が oblique の傾く角度を様々に実装するために使用され、 `"ital"` 変数の値が 1 ならば、 italic の値を使用します。 {{cssxref("font-variation-settings")}} を参照してください。
 
-<h4 id="HTML">HTML</h4>
+> **Note:** 次の例を動作させるには、 CSS Fonts Level 4 の `font-style: oblique` が `<angle>` を受け入れる構文に対応したブラウザーが必要です。デモは `font-style: oblique 23deg;` を読み込みます。この値を変更すると、テキストの傾きが変わるのを確認することができます。
 
-<div id="variable-font-example">
-<pre class="brush: html">&lt;header&gt;
-    &lt;input type="range" id="slant" name="slant" min="-90" max="90" /&gt;
-    &lt;label for="slant"&gt;Slant&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>
+{{EmbedGHLiveSample("css-examples/variable-fonts/oblique.html", '100%', 860)}}
 
-<h4 id="CSS">CSS</h4>
+## アクセシビリティの考慮
 
-<pre class="brush: css">/*
-AmstelvarAlpha-VF is created by <span class="col-11 mr-2 text-gray-dark">David Berlow</span> (https://github.com/TypeNetwork/Amstelvar)
-and is used here under the terms of its license:
-https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
-*/
+テキストの長い区間に渡って `font-style` の値を `italic` に設定すると、失読症のような認知問題を抱える人にとって読むのが難しくなる可能性があります。
 
-@font-face {
-  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
-  font-family:'AmstelvarAlpha';
-  font-style: normal;
-}
+- [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)
+- [W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation)
 
-label {
-  font: 1rem monospace;
-}
+## 公式定義
 
-.container {
-  max-height: 150px;
-  overflow: scroll;
-}
+{{cssinfo}}
 
-.sample {
-  font: 2rem 'AmstelvarAlpha', sans-serif;
-}
+## 形式文法
 
-</pre>
+{{csssyntax}}
 
-<div class="hidden">
-<pre class="brush: css">html, body {
-  max-height: 100vh;
-  max-width: 100vw;
-  overflow: hidden;
-}
+## 例
 
-body {
-  display: flex;
-  flex-direction: column;
-}
+<h3 id="Font_styles">フォントスタイル</h3>
 
-header {
-  margin-bottom: 1.5rem;
-}
+```html hidden
+<p class="normal">This paragraph is normal.</p>
+<p class="italic">This paragraph is italic.</p>
+<p class="oblique">This paragraph is oblique.</p>
+```
 
-.container {
-  flex-grow: 1;
+```css
+.normal {
+  font-style: normal;
 }
 
-.container &gt; p {
-  margin-top: 0;
-  margin-bottom: 0;
+.italic {
+  font-style: italic;
 }
-</pre>
-</div>
 
-<h4 id="JavaScript">JavaScript</h4>
-
-<pre class="brush: js">let slantLabel = document.querySelector('label[for="slant"]');
-let slantInput = document.querySelector('#slant');
-let sampleText = document.querySelector('.sample');
-
-function update() {
-  let slant = `oblique ${slantInput.value}deg`;
-  slantLabel.textContent = `font-style: ${slant};`;
-  sampleText.style.fontStyle = slant;
+.oblique {
+  font-style: oblique;
 }
+```
 
-slantInput.addEventListener('input', update);
+{{ EmbedLiveSample('Font_styles') }}
 
-update();
-</pre>
-</div>
+## 仕様書
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{Specifications}}
 
-{{csssyntax}}
-
-<h2 id="Example" name="Example">例</h2>
+## ブラウザーの互換性
 
-<h3 id="Font_styles" name="Font_styles">フォントスタイル</h3>
+{{Compat}}
 
-<div class="hidden">
-<pre class="brush: html">&lt;p class="normal"&gt;This paragraph is normal.&lt;/p&gt;
-&lt;p class="italic"&gt;This paragraph is italic.&lt;/p&gt;
-&lt;p class="oblique"&gt;This paragraph is oblique.&lt;/p&gt;
-</pre>
-</div>
+## 関連情報
 
-<pre class="brush: css">.normal {
-  font-style: normal;
-}
-
-.italic {
-  font-style: italic;
-}
-
-.oblique {
-  font-style: oblique;
-}</pre>
-
-<p>{{ EmbedLiveSample('Font_styles') }}</p>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
-
-<p>テキストの長い区間に渡って <code>font-style</code> の値を <code>italic</code> に設定すると、失読症のような認知問題を抱える人にとって読むのが難しくなる可能性があります。</p>
-
-<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/WCAG21/#visual-presentation">W3C Understanding WCAG 2.1</a></li>
-</ul>
-
-<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-style-prop', 'font-style')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td><code>oblique</code> の後で角度を指定できるようになった</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("css.properties.font-style")}}</p>
+- {{cssxref("font-style")}}
+- {{cssxref("font-weight")}}
+- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals)