Web/CSS/font-family を更新

- 2021/08/13 時点の英語版に同期

1 files changed, 149 insertions, 147 deletions

diff --git a/files/ja/web/css/font-family/index.md b/files/ja/web/css/font-family/index.md
index c8092db361..00399f5b81 100644
--- a/files/ja/web/css/font-family/index.md
+++ b/files/ja/web/css/font-family/index.md
@@ -6,33 +6,32 @@ tags:
   - CSS フォント
   - CSS プロパティ
   - Reference
-  - font
-  - font-family
+  - recipe:css-property
+browser-compat: css.properties.font-family
 translation_of: Web/CSS/font-family
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>CSS の <strong><code>font-family</code></strong> プロパティは、選択した要素に対して、フォントファミリ名や総称ファミリ名の優先順位リストを指定することができます。</p>
+CSS の **`font-family`** プロパティは、選択した要素に対して、フォントファミリー名や総称ファミリー名の優先順位リストを指定することができます。
 
-<div>{{EmbedInteractiveExample("pages/css/font-family.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-family.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+複数の値をカンマで区切って、代替フォントを示します。ブラウザーはリストの中で最初のインストール済み、または {{CSSxRef("@font-face")}} アット規則を使用してダウンロード可能なフォントを選択します。
 
-<p>複数の値をカンマで区切って、代替フォントを示します。ブラウザーはリストの中で最初のインストール済み、または {{CSSxRef("@font-face")}} @-規則を使用してダウンロード可能なフォントを選択します。</p>
+一括指定プロパティの {{CSSxRef("font")}} を使用すると、 `font-size` やその他のフォント関連プロパティを一度に設定できるのでふつうは便利です。
 
-<p>一括指定プロパティの {{CSSxRef("font")}} を使用すると、 <code>font-size</code> やその他のフォント関連プロパティを一度に設定できるのでふつうは便利です。</p>
+指定されたフォントが利用可能であるという保証はないので、 `font-family` リストの中に、総称ファミリーを少なくとも 1 つ、常に追加しておくべきです。総称ファミリーを使うことで、必要ならば、ブラウザーで受け付け可能な代替フォントを選択させることができます。
 
-<p>指定されたフォントが利用可能であるという保証はないので、 <code>font-family</code> リストの中に、総称ファミリを少なくとも 1 つ、常に追加しておくべきです。総称ファミリを使うことで、必要ならば、ブラウザーで受け付け可能な代替フォントを選択させることができます。</p>
+`font-family` プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定します。フォント選択は、ユーザーのシステム上に存在する、リスト中の一番最初に指定されたフォントを選んで終わるとは**限りません**。むしろ、フォント選択は **1 文字ずつ**行われます。なぜなら、利用可能なフォントが、その文字を表示するのに必要なグリフを欠いている場合には、そのフォントよりも順位の低い利用可能なフォントが試行されるからです。あるフォントが一部の[スタイル](/ja/docs/Web/CSS/font-style)、[種類](/ja/docs/Web/CSS/font-variant、[大きさ](/ja/docs/Web/CSS/font-size)でのみ利用可能な場合、これらのプロパティがフォントファミリーの選択に影響する可能性があります。
 
-<p><code>font-family</code> プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定します。フォント選択は、ユーザーのシステム上に存在する、リスト中の一番最初に指定されたフォントを選んで終わるとは<strong>限りません</strong>。むしろ、フォント選択は <strong>1 文字ずつ</strong>行われます。なぜなら、利用可能なフォントが、その文字を表示するのに必要なグリフを欠いている場合には、そのフォントよりも順位の低い利用可能なフォントが試行されるからです (ただし、これは Internet Explorer 6 およびそれ以前では動作しません)。フォントが一部の<a href="/ja/docs/Web/CSS/font-style">スタイル</a>、<a href="/ja/docs/Web/CSS/font-variant">種類</a>、<a href="/ja/docs/Web/CSS/font-size">大きさ</a>でのみ利用可能な場合、これらのプロパティがどのフォントファミリを選択するかに影響する可能性があります。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css; no-line-numbers">/* フォントファミリ名および総称ファミリ名 */
-font-family: Gill Sans Extrabold, sans-serif;
+```css
+/* フォントファミリー名および総称ファミリー名 */
+font-family: "Gill Sans Extrabold", sans-serif;
 font-family: "Goudy Bookletter 1911", sans-serif;
 
-/* 総称ファミリ名のみ */
+/* 総称ファミリー名のみ */
 font-family: serif;
 font-family: sans-serif;
 font-family: monospace;
@@ -50,89 +49,118 @@ font-family: fangsong;
 /* グローバル値 */
 font-family: inherit;
 font-family: initial;
+font-family: revert;
 font-family: unset;
-</pre>
-
-<p><code>font-family</code> プロパティは1つ以上のフォントファミリを、カンマで区切って指定します。それぞれのフォントファミリは <code><a href="#&lt;family-name>">&lt;family-name&gt;</a></code> または <code><a href="#&lt;generic-name>">&lt;generic-name&gt;</a></code> の値です。</p>
-
-<p>以下の例は二つのフォントファミリを並べており、最初は <code>&lt;family-name&gt;</code> で二番目は <code>&lt;generic-name&gt;</code> です。</p>
-
-<pre class="brush: css">font-family: Gill Sans Extrabold, sans-serif;</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><a id="&lt;family-name>" name="&lt;family-name>"><code>&lt;family-name&gt;</code></a></dt>
- <dd>フォントファミリの名称。例えば、 "Times" や "Helvetica" はフォントファミリです。空白を含むフォントファミリ名は、引用符で囲む必要があります。</dd>
- <dt><a id="&lt;generic-name>" name="&lt;generic-name>"><code>&lt;generic-name&gt;</code></a></dt>
- <dd>
- <p>総称フォントファミリは代替メカニズムです。このメカニズムによって、指定されたフォントがどれも利用できなかった場合、スタイルシート製作者の意図を多少なりとも保つことができます。総称ファミリ名はキーワードであり、引用符で囲んではいけません。総称フォントファミリは、フォントファミリ名リストの最終選択肢である必要があります。以下のキーワードが定義されています。</p>
-
- <dl>
-  <dt><code>serif</code></dt>
-  <dd style="font-family: serif;">終わりが止めや払い、または実際の活字のセリフの形をした角を持つ字形です。<br>
-  例: <span style="font-family: lucida bright,serif;">Lucida Bright</span>, <span style="font-family: lucida fax,serif;">Lucida Fax</span>, <span style="font-family: palatino,serif;">Palatino</span>, <span style="font-family: palatino linotype,serif;">"Palatino Linotype"</span>, <span style="font-family: palladio,serif;">Palladio</span>, <span style="font-family: urw palladio,serif;">"URW Palladio"</span>, <span style="font-family: serif;">serif</span></dd>
-  <dt><code>sans-serif</code></dt>
-  <dd style="font-family: sans-serif;">平たい角の端を持つ字形です。<br>
-  例: <span style="font-family: open sans,sans-serif;">"Open Sans"</span>, <span style="font-family: fira sans,sans-serif;">"Fira Sans"</span>, <span style="font-family: lucida sans,sans-serif;">"Lucida Sans"</span>, <span style="font-family: lucida sans unicode,sans-serif;">"Lucida Sans Unicode"</span>, <span style="font-family: trebuchet ms,sans-serif;">"Trebuchet MS"</span>, <span style="font-family: liberation sans,sans-serif;">"Liberation Sans"</span>, <span style="font-family: nimbus sans l,sans-serif;">"Nimbus Sans L"</span>, <span style="font-family: sans-serif;">sans-serif</span></dd>
-  <dt><code>monospace</code></dt>
-  <dd style="font-family: monospace;">すべての字が同じ幅を持つ字形です。<br>
-  例: <span style="font-family: fira mono,monospace;">"Fira Mono"</span>, <span style="font-family: dejavu sans mono,monospace;">"DejaVu Sans Mono"</span>, <span style="font-family: menlo,monospace;">Menlo</span>, <span style="font-family: consolas,monospace;">Consolas</span>, <span style="font-family: liberation mono,monospace;">"Liberation Mono"</span>, <span style="font-family: monaco,monospace;">Monaco</span>, <span style="font-family: lucida console,monospace;">"Lucida Console"</span>, <span style="font-family: monospace;">monospace</span></dd>
-  <dt><code>cursive</code></dt>
-  <dd style="font-family: cursive;">筆記体フォントの字形には、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の筆記体の特性があります。字形は、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。<br>
-  例: <span style="font-family: brush script mt,cursive;">"Brush Script MT</span>", <span style="font-family: brush script std,cursive;">"Brush Script Std</span>", <span>"Lucida Calligraphy"</span>, <span>"Lucida Handwriting"</span>, <span style="font-family: apple chancery,cursive;">"Apple Chancery"</span>, <span style="font-family: cursive;">cursive</span></dd>
-  <dt><code>fantasy</code></dt>
-  <dd style="font-family: fantasy;">fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。<br>
-  例: <span style="font-family: papyrus,fantasy;">Papyrus</span>, <span style="font-family: herculanum,fantasy;">Herculanum</span>, <span style="font-family: party let,fantasy;">Party LET</span>, <span style="font-family: curlz mt,fantasy;">Curlz MT</span>, <span style="font-family: harrington,fantasy;">Harrington</span>, <span style="font-family: fantasy;">fantasy</span>.</dd>
-  <dt><code>system-ui</code></dt>
-  <dd>指定されたプラットフォームの既定のユーザーインターフェイスフォントからグリフを取ります。文字の伝統は世界で様々であるため、この総称は他の総称にきれいに一致しない文字フォントを提供します。</dd>
-  <dt><code>ui-serif</code></dt>
-  <dd>ユーザーインターフェイス既定のセリフ付きフォントです。</dd>
-  <dt><code>ui-sans-serif</code></dt>
-  <dd>ユーザーインターフェイス既定のセリフなしフォントです。</dd>
-  <dt><code>ui-monospace</code></dt>
-  <dd>ユーザーインターフェイス既定の等幅フォントです。</dd>
-  <dt><code>ui-rounded</code></dt>
-  <dd>ユーザーインターフェイス既定の丸い特性を持ったフォントです。</dd>
-  <dt><code>math</code></dt>
-  <dd>これは、数式を表現するための特別なスタイル上の概念のためのものです。上付き文字と下付き文字、複数行をまたぐ括弧、式の入れ子、明確な意味を持つ二重のグリフなどです。</dd>
-  <dt><code>emoji</code></dt>
-  <dd>絵文字を表示するために特別にデザインされたフォントです。</dd>
-  <dt><code>fangsong</code></dt>
-  <dd>セリフ風の Song と手書き風の Kai の形の間にある中国語の文字の特定のスタイルです。このスタイルは政府文書によく使用されます。</dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Valid_family_names" name="Valid_family_names">妥当なファミリ名</h3>
-
-<p>フォントファミリ名は、引用符で囲まれた文字列か、引用符で囲まれていない 1 つ以上の識別子でなければなりません。これは、引用符で囲まれていないフォントファミリ名において、各トークンの冒頭に区切り記号文字や数字がある場合、エスケープしなければならないということを意味します。</p>
-
-<p>例えば、以下の宣言は妥当です:</p>
-
-<pre class="brush: css; example-good">font-family: Gill Sans Extrabold, sans-serif;
-font-family: "Goudy Bookletter 1911", sans-serif;</pre>
-
-<p>以下の宣言は<strong>無効</strong>です。</p>
-
-<pre class="brush: css; example-bad">font-family: Goudy Bookletter 1911, sans-serif;
+```
+
+`font-family` プロパティは、1 つ以上のフォントファミリーをカンマで区切って指定します。それぞれのフォントファミリーは `<family-name>` または `<generic-name>` の値です。
+
+以下の例は 2 つのフォントファミリーを並べており、最初は `<family-name>` で二番目は `<generic-name>` です。
+
+```css
+font-family: "Gill Sans Extrabold", sans-serif;
+```
+
+### 値
+
+- `<family-name>`
+  - : フォントファミリーの名称。例えば、 "Times" や "Helvetica" はフォントファミリーです。空白を含むフォントファミリー名は、引用符で囲む必要があります。
+- `<generic-name>`
+
+  - : 総称フォントファミリーは代替の仕組みです。この仕組みによって、指定されたフォントがどれも利用できなかった場合、スタイルシート製作者の意図を多少なりとも保つことができます。総称ファミリー名はキーワードであり、引用符で囲んではいけません。総称フォントファミリーは、フォントファミリー名リストの最終選択肢である必要があります。以下のキーワードが定義されています。
+
+    - `serif`
+
+      - : 終わりが止めや払い、または実際の活字のセリフの形をした角を持つ字形です。
+
+        例: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif
+
+    - `sans-serif`
+
+      - : 平たい角の端を持つ字形です。
+
+        例: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif.
+
+    - `monospace`
+
+      - : すべての字が同じ幅を持つ字形です。
+
+        例: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace
+
+    - `cursive`
+
+      - : 筆記体フォントの字形には、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の筆記体の特性があります。字形は、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。
+
+        例: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive
+
+    - `fantasy`
+
+      - : fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。
+
+        例: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy
+
+    - `system-ui`
+       - : 指定されたプラットフォームの既定のユーザーインターフェイスフォントからグリフを取ります。文字の伝統は世界で様々であるため、この総称は他の総称にきれいに一致しない文字フォントを提供します。
+    - `ui-serif`
+      - : ユーザーインターフェイス既定のセリフ付きフォントです。
+    - `ui-sans-serif`
+      - : ユーザーインターフェイス既定のセリフなしフォントです。
+    - `ui-monospace`
+      - : ユーザーインターフェイス既定の等幅フォントです。
+    - `ui-rounded`
+      - : ユーザーインターフェイス既定の丸い特性を持ったフォントです。
+    - `math`
+      - : これは、数式を表現するための特別なスタイル上の概念のためのものです。上付き文字と下付き文字、複数行をまたぐ括弧、式の入れ子、明確な意味を持つ二重のグリフなどです。
+    - `emoji`
+      - : 絵文字を表示するために特別にデザインされたフォントです。
+    - `fangsong`
+      - : セリフ風の Song と手書き風の Kai の形の間にある中国語の文字の特定のスタイルです。このスタイルは政府文書によく使用されます。
+
+### 有効なファミリー名
+
+フォントファミリー名は、引用符で囲まれた文字列か、引用符で囲まれていない 1 つ以上の識別子でなければなりません。これは、引用符で囲まれていないフォントファミリー名において、各トークンの冒頭に区切り記号文字や数字がある場合、エスケープしなければならないということを意味します。
+
+ホワイトスペース、数字、ハイフン以外の区切り文字を含むフォントファミリー名を引用符でくくるのは**良い習慣**です。
+
+例えば、以下の宣言は有効です。
+
+```css example-good
+font-family: "Goudy Bookletter 1911", sans-serif;
+```
+
+以下の宣言は**無効**です。
+
+```css example-bad
+font-family: Goudy Bookletter 1911, sans-serif;
 font-family: Red/Black, sans-serif;
 font-family: "Lucida" Grande, sans-serif;
 font-family: Ahem!, sans-serif;
 font-family: test@foo, sans-serif;
 font-family: #POUND, sans-serif;
-font-family: Hawaii 5-0, sans-serif;</pre>
+font-family: Hawaii 5-0, sans-serif;
+```
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+以下の例は技術的には**有効**ですが、推奨されません。
 
-{{CSSSyntax}}
+```css
+font-family: Gill Sans Extrabold, sans-serif;
+```
+
+## 公式定義
+
+{{cssinfo}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 形式文法
 
-<h3 id="Some_common_font_families" name="Some_common_font_families">いくつかのよくあるフォントファミリ</h3>
+{{csssyntax}}
 
-<pre class="brush: css;">.serif {
-  font-family: Times, Times New Roman, Georgia, serif;
+## 例
+
+<h3 id="Some_common_font_families">よくあるいくつかのフォントファミリー</h3>
+
+```css
+.serif {
+  font-family: Times, "Times New Roman", Georgia, serif;
 }
 
 .sansserif {
@@ -140,7 +168,7 @@ font-family: Hawaii 5-0, sans-serif;</pre>
 }
 
 .monospace {
-  font-family: Lucida Console, Courier, monospace;
+  font-family: "Lucida Console", Courier, monospace;
 }
 
 .cursive {
@@ -162,80 +190,54 @@ font-family: Hawaii 5-0, sans-serif;</pre>
 .fangsong {
   font-family: fangsong;
 }
-</pre>
+```
 
-<div class="hidden">
-<pre class="brush: html;">&lt;div class="serif"&gt;
+```html hidden
+<div class="serif">
   This is an example of a serif font.
-&lt;/div&gt;
+</div>
 
-&lt;div class="sansserif"&gt;
+<div class="sansserif">
   This is an example of a sans-serif font.
-&lt;/div&gt;
+</div>
 
-&lt;div class="monospace"&gt;
+<div class="monospace">
   This is an example of a monospace font.
-&lt;/div&gt;
+</div>
 
-&lt;div class="cursive"&gt;
+<div class="cursive">
   This is an example of a cursive font.
-&lt;/div&gt;
+</div>
 
-&lt;div class="fantasy"&gt;
+<div class="fantasy">
   This is an example of a fantasy font.
-&lt;/div&gt;
+</div>
 
-&lt;div class="math"&gt;
+<div class="math">
   This is an example of a math font.
-&lt;/div&gt;
+</div>
 
-&lt;div class="emoji"&gt;
+<div class="emoji">
   This is an example of an emoji font.
-&lt;/div&gt;
+</div>
 
-&lt;div class="fangsong"&gt;
+<div class="fangsong">
   This is an example of a fangsong font.
-&lt;/div&gt;</pre>
 </div>
+```
+
+{{EmbedLiveSample("Some_common_font_families", 600, 220)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
 
-<p>{{EmbedLiveSample("Some_common_font_families", 600, 120)}}</p>
-
-<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", "#generic-font-families", "generic font families")}}</td>
-   <td>{{Spec2("CSS4 Fonts")}}</td>
-   <td>新しい総称フォントファミリを追加。特に、 <code>system-ui</code>, <code>ui-serif</code>, <code>ui-sans-serif</code>, <code>ui-monospace</code>, <code>ui-rounded</code>, <code>emoji</code>, <code>math</code>, <code>fangsong</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Fonts", "#font-family-prop", "font-family")}}</td>
-   <td>{{Spec2("CSS3 Fonts")}}</td>
-   <td>特に変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "fonts.html#propdef-font-family", "font-family")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>特に変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1", "#font-family", "font-family")}}</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-family")}}</p>
+- {{cssxref("font-style")}}
+- {{cssxref("font-weight")}}
+- [基本的なテキストとフォントのスタイル付け](/ja/docs/Learn/CSS/Styling_text/Fundamentals)