From ec35860e99aebe90a636a33b40209894ccf6fb36 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 16 Feb 2022 09:58:00 +0900 Subject: Web/CSS/@font-face 以下の記述子の記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/@font-face/font-display/index.html | 110 --------------------- files/ja/web/css/@font-face/font-display/index.md | 110 +++++++++++++++++++++ 2 files changed, 110 insertions(+), 110 deletions(-) delete mode 100644 files/ja/web/css/@font-face/font-display/index.html create mode 100644 files/ja/web/css/@font-face/font-display/index.md (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 deleted file mode 100644 index 0a92c17416..0000000000 --- a/files/ja/web/css/@font-face/font-display/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -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")}} - -## 関連情報 - - diff --git a/files/ja/web/css/@font-face/font-display/index.md b/files/ja/web/css/@font-face/font-display/index.md new file mode 100644 index 0000000000..0a92c17416 --- /dev/null +++ b/files/ja/web/css/@font-face/font-display/index.md @@ -0,0 +1,110 @@ +--- +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