FontFace: display プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

displayFontFace インターフェイスのプロパティで、フォントフェイスがどのように表示されるかを、それがダウンロードされ使用する準備ができているかどうかに基づいて決定します。 このプロパティは CSS の font-display 記述子に相当します。

このプロパティが使用されると、フォントの読み込みは 3 つの期間を持つタイムラインを持ちます。 最初の 2 つの期間の長さは、プロパティの値とユーザーエージェントに依存します。 (下記参照。)

ブロック期間

ブラウザーは目に見えない形で代替フォントを準備します。この間にフォントフェイスが読み込まれると、それを使用してテキストが表示され、表示が完了します。

スワップ期間

フォントフェイスがまだ読み込まれていない場合は、代替フォントが表示されます。 フォントフェイスが読み込まれると、代替フォントがダウンロードしたフォントと入れ替えられます。

失敗期間

フォントフェイスがまだ読み込まれていない場合は、代替フォントが表示され、入れ替えは行われません。

以下のいずれかの値を持つ文字列です。

auto

ユーザーエージェントが指定されたフォント表示方針を使用します。

block

フォントフェイスのブロック期間を短く、スワップ期間を無限にします。 仕様ではブロック期間は 3 秒を推奨していますが、これはブラウザーによって異なる場合があります。

fallback

フォントフェイスのブロック期間とスワップ期間を短くします。 仕様では、ブロック期間は 100 ミリ秒以下、スワップ期間は 3 秒以下を推奨していますが、この値はブラウザーによって異なる場合があります。

optional

フォントフェイスのブロック期間を短くし、スワップ期間はなしにします。 仕様では 100 ミリ秒以下を推奨していますが、これはブラウザーによって異なる場合があります。

swap

フォントフェイスのブロック期間を 0 秒に、スワップ期間を無限にします。

仕様書

Specification
CSS Font Loading Module Level 3
# dom-fontface-display

ブラウザーの互換性

BCD tables only load in the browser