diff options
Diffstat (limited to 'files/ja/web/css/@font-face/font-display/index.html')
| -rw-r--r-- | files/ja/web/css/@font-face/font-display/index.html | 72 |
1 files changed, 34 insertions, 38 deletions
diff --git a/files/ja/web/css/@font-face/font-display/index.html b/files/ja/web/css/@font-face/font-display/index.html index 3b11953bba..0a92c17416 100644 --- a/files/ja/web/css/@font-face/font-display/index.html +++ b/files/ja/web/css/@font-face/font-display/index.html @@ -12,11 +12,11 @@ tags: - リファレンス translation_of: Web/CSS/@font-face/font-display --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>font-display</code></strong> 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。</p> +<strong>`font-display`</strong> 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 <pre class="brush:css notranslate">/* キーワード値 */ font-display: auto; @@ -27,43 +27,39 @@ font-display: optional;</pre> <h3 id="Values" name="Values">値</h3> -<dl> - <dt><code>auto</code></dt> - <dd>フォントの表示戦略はユーザーエージェントが定義します。</dd> - <dt><code>block</code></dt> - <dd>フォントに対して短いブロック期の後、永続的にスワップ期を置きます。</dd> - <dt><code>swap</code></dt> - <dd>フォントに対して非常に短いブロック期の後、永続的にスワップ期を置きます。</dd> - <dt><code>fallback</code></dt> - <dd>フォントに対して非常に短いブロック期の後、短いスワップ期を置きます。</dd> - <dt><code>optional</code></dt> - <dd>フォントに対して非常に短いブロック期の後、スワップ期を置きません。</dd> -</dl> +- `auto` + - : フォントの表示戦略はユーザーエージェントが定義します。 +- `block` + - : フォントに対して短いブロック期の後、永続的にスワップ期を置きます。 +- `swap` + - : フォントに対して非常に短いブロック期の後、永続的にスワップ期を置きます。 +- `fallback` + - : フォントに対して非常に短いブロック期の後、短いスワップ期を置きます。 +- `optional` + - : フォントに対して非常に短いブロック期の後、スワップ期を置きません。 <h2 id="Description" name="Description">説明</h2> <h3 id="The_font_display_timeline" name="The_font_display_timeline">フォント表示の過程</h3> -<p>フォント表示の過程は、ユーザーエージェントが指定されたダウンロードフォントを利用しようとした瞬間に始まります。過程はフォントを利用して任意の要素を表示する振る舞いを説明する、以下の 3 つの時期に分かれます。</p> +フォント表示の過程は、ユーザーエージェントが指定されたダウンロードフォントを利用しようとした瞬間に始まります。過程はフォントを利用して任意の要素を表示する振る舞いを説明する、以下の 3 つの時期に分かれます。 -<dl> - <dt>フォントブロック期</dt> - <dd>フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は <em>不可視の</em> 代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。</dd> - <dt>フォントスワップ期</dt> - <dd>フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。</dd> - <dt>フォント失敗期</dt> - <dd>フォントが読み込まれていない場合、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。</dd> -</dl> +- フォントブロック期 + - : フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は <em>不可視の</em> 代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。 +- フォントスワップ期 + - : フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。 +- フォント失敗期 + - : フォントが読み込まれていない場合、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。 <h2 id="Formal_definition" name="Formal_definition">定義</h2> -<p>{{cssinfo}}</p> +{{cssinfo}} <h2 id="Formal_syntax" name="Formal_syntax">構文</h2> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 <h3 id="Specifying_fallback_font-display" name="Specifying_fallback_font-display">font-display のフォールバックを指定する</h3> @@ -95,20 +91,20 @@ font-display: optional;</pre> </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## ブラウザーの互換性 -<p>{{Compat("css.at-rules.font-face.font-display")}}</p> +{{Compat("css.at-rules.font-face.font-display")}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 <ul> - <li>{{cssxref("@font-face/font-family", "font-family")}}</li> - <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li> - <li>{{cssxref("@font-face/font-style", "font-style")}}</li> - <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li> - <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li> - <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li> - <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li> - <li>{{cssxref("@font-face/src", "src")}}</li> - <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li> +- {{cssxref("@font-face/font-family", "font-family")}} +- {{cssxref("@font-face/font-stretch", "font-stretch")}} +- {{cssxref("@font-face/font-style", "font-style")}} +- {{cssxref("@font-face/font-weight", "font-weight")}} +- {{cssxref("@font-face/font-variant", "font-variant")}} +- {{cssxref("font-feature-settings", "font-feature-settings")}} +- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} +- {{cssxref("@font-face/src", "src")}} +- {{cssxref("@font-face/unicode-range", "unicode-range")}} </ul> |