From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/css/@font-face/font-display/index.html | 116 +++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 files/ja/web/css/@font-face/font-display/index.html (limited to 'files/ja/web/css/@font-face/font-display') diff --git a/files/ja/web/css/@font-face/font-display/index.html b/files/ja/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..b10d04d028 --- /dev/null +++ b/files/ja/web/css/@font-face/font-display/index.html @@ -0,0 +1,116 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +tags: + - '@font-face' + - CSS + - CSS フォント + - CSS 記述子 + - font-display + - ウェブフォント + - フォント + - リファレンス +translation_of: Web/CSS/@font-face/font-display +--- +
{{CSSRef}}
+ +

font-display 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。

+ +

構文

+ +
/* キーワード値 */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;
+ +

値

+ +
+
auto
+
フォントの表示戦略はユーザーエージェントが定義します。
+
block
+
フォントに対して短いブロック期の後、永続的にスワップ期を置きます。
+
swap
+
フォントに対して非常に短いブロック期の後、永続的にスワップ期を置きます。
+
fallback
+
フォントに対して非常に短いブロック期の後、短いスワップ期を置きます。
+
optional
+
フォントに対して非常に短いブロック期の後、スワップ期を置きません。
+
+ +

説明

+ +

フォント表示の過程

+ +

フォント表示の過程は、ユーザーエージェントが指定されたダウンロードフォントを利用しようとした瞬間に始まります。過程はフォントを利用して任意の要素を表示する振る舞いを説明する、以下の 3 つの時期に分かれます。

+ +
+
フォントブロック期
+
フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は 不可視の 代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。
+
フォントスワップ期
+
フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。
+
フォント失敗期
+
フォントが読み込まれていない場合、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。
+
+ +

定義

+ +

{{cssinfo}}

+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

font-display のフォールバックを指定する

+ +
@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.font-face.font-display")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf