CSS3

@規則用記述子

font-display

[Edge]○？。→●、mdn

ある書体を、それが［いつダウンロードされ利用するに準備済みになったか］に基づいて、どう表示するかを決定する。

auto

ユーザーエージェントが、フォント表示施策を定義する。

注記： 多くのブラウザは、block が指定するものと類似な施策を既定にしている。

block

短い阻み期間（ほとんどの事例では、3 秒が推奨される）と無限な入れ替わり期間を、書体に与える。

注記： 言い換えれば、ブラウザは、［読み込まれていない場合は、先ず“不可視”テキストを描く］が、書体が読み込まれ次第 入れ替える。

この値を利用するのは、［ページが利用可能になるためには、ある特定のフォントでテキストを描画することが要求される］とき、それも小さなテキスト片に限られなければならない。

例えば、不良に設計された“アイコン フォント”は、"⎙"（印刷機）アイコンを "P" の様な無関係な文字に結び付けるかもしれない。そのようなとき、テキストがフォールバック フォントで表示される場合、欲されるアイコンでなく、意味不明な普通字がページに散在することになる。この事例では、一時的に虫食いにした方がフォールバック フォントを利用するより良くなる。

（しかしながら、最終的には フォールバック フォントが利用される ― リンクその他が まったく示されないより、ページに意味不明な普通字が散在する方が良いので）

もっと良い解決策は、§ アクセス能の考慮点 にて述べられる。

以下のCSSが組み込んであります：

<SPAN style="font-size:30px;
 font-family:Test_Font_block;
">ABCabc012漢字</SPAN>

¶小文字が遅れて設定されるはず？

swap

極めて短い阻み期間（ほとんどの事例では、0.1 秒以下が推奨される）と無限な入れ替わり期間を、書体に与える。

注記： 言い換えれば、ブラウザは、［書体が読み込まれていない場合には、即時にフォールバックでテキストを描く］が、書体が読み込まれ次第 入れ替える。

この値を利用するのは、［ページにとってある特定のフォントによるテキストの描画がごく重要であるが、どのフォントによる描画も、依然として正しいメッセージを伝える］とき、それも小さなテキスト片に限られるべきである。

例えば、ある web サイトが ロゴの描画用にカスタム フォントを用いる場合、そのロゴを正しく描画することは、ブランド展開の目的には それなりに重要になるが、他のフォントでロゴを表示しても、少なくとも要点はきちんと伝わるとき。

<SPAN style="font-size:30px;
 font-family:Test_Font_swap;
">ABCabc012漢字</SPAN>

¶

fallback

極めて短い阻み期間（ほとんどの事例では、0.1 秒以下が推奨される）と 短い入れ替わり期間（ほとんどの事例では、3 秒が推奨される）を、書体に与える。

注記： 言い換えれば、［書体が読み込まれなかった場合は、先ずフォールバックで描画される］が、読み込まれ次第 入れ替える。しかしながら、それまでに時間がかかり過ぎた場合、それ以降も ― 当のページが存続する限り ― フォールバックが利用されることになる。

この値は、［フォントの利用が有用で欲されるが、利用者にとって、フォールバック フォントでテキストを見ることも受容可能である所］で、本文その他のテキスト用に利用されるべきである。この値は、大きなテキスト片に利用するのが適切になる。

例えば、大きな本文テキスト片においては、利用者が可能な限り素早く読み始めれるよう、単にテキストが素早く描画されることが最も重要になる。更に、利用者が読み始めて以降は、［新たなフォントに入れ替わるに伴い、テキストが不意に“ずれる”］ことにより妨げられるべきでない ― 読んでいた箇所を見つけ直すのは、面倒なので。

<SPAN style="font-size:30px;
 font-family:Test_Font_fallback;
">ABCabc012漢字</SPAN>

¶

optional

フォントが“即時に”（テキストの“最初の塗り”に可用になるように）読み込めたなら、そのフォントを利用する。

他の場合、当のフォントは、その［阻み期間、入れ替わり期間］どちらも［読み込みを完遂する前に失効した］かのように扱われる。これに因り、当のフォントが利用されない場合、ユーザーエージェントは［フォント ダウンロードを中止する／ごく低優先度でダウンロードする］ことにしてもよい。ユーザーエージェントは、利用者にとって有用になると予見する場合には、［フォント ダウンロードを開始するのを避けて、フォールバック フォントを即時に利用する］ことにしてもよい。

optional なフォントは、読み込まれたとしても、ページのレイアウトは決して“急変”させないものとする。ユーザーエージェントは、そのようなフォントを利用している要素の描画を ― ［場合によっては遅い、局所的なキャッシュ］から読み込む時間を与えるため ― 少し遅延することにしてもよいが、テキストがフォールバック フォントでスクリーンに塗られて以降は ― ページが存続する限り ― optional なフォントでは描画しないものとする。

この値は、［選ばれたフォントは純粋に装飾的で、“あったらいい感じ”になる所］で、本文その他のテキスト用に利用されるべきである。それは、利用者が web ページを最初に訪問したとき［何もかもが一挙に完全な形に見えるまで長く待機するより、素早く描画する方が重要である］ときには、いつでも利用されるべきである。

例えば、本文テキストは、ブラウザの既定のフォントで完全な形に読める ― ダウンロード可能な書体の方が、より見栄えして、サイトの美観にも良くかみ合うかもしれないが。サイトへの初回の訪問者は、一般に、サイトの表示が美麗になることより、素早く利用可能になる方をずっと気にする。optional は、そのための良好なふるまいを供する。後で再訪したときは、欲された書体をダウンロードし終えているかもしれず、初回／後続の訪問を遅めることなく“意図される”体験を与えれるので。

接続がごく遅い利用者は“意図される”体験を以後も受け取らないかもしれないが、optional は ― 読み込むまで長くかかり過ぎたため、あきらめて他所へ行くことなく ― サイトを実際に利用できることを確保する。

注記： optional なフォントが何らかのテキストの描画に利用される時点で可用になる機会を増やすため、ユーザーエージェントには、［アクセスを速くする／当のテキストの描画をいつ遅延するに価するか判定する］ための経験則を使役することが推奨される ― 例えば： フォントは HTML 内で事前に読み込まれたかどうか検査する／スタイルシート内に見つかり次第、フォント データをメモリー キャッシュ内の遅い所から速い所へ移動する（ページに利用されるかどうか既知になる前に）など。

しかしながら、作者は、これらの経験則には依拠できない ― optional 値は、［当のフォントが決して利用されない結果にもなり得る］ものと解さなければならない。フォントが利用される確約をいくぶん高くする必要がある作者は、fallback 値を利用すること考慮するべきである。

<SPAN style="font-size:30px;
 font-family:Test_Font_optional;
">ABCabc012漢字</SPAN>

¶

テスト