Chrome CanaryでCSSのfont-displayプロパティが使えるようになったそうだ。

font-displayプロパティとはCSSの@font-face中で使うことで、そのウェブフォントがダウンロードされる間テキストがどのようにレンダリングされるかをコントロールするプロパティである。次は仕様から引用。

The font-display descriptor for @font-face determines how a font face is displayed, based on whether and when it is downloaded and ready to use.

適当に訳すると、

@font-faceのfont-deisplayディスクリプタはダウンロードされ利用可能になるなどのタイミングに基づいて、フォントフェイスがどのように表示されるかを決定するものである。

わかりやすく言い換えると、FOUTをどうするかをコントロールするためのものだ。

これで貴方もWebFontLoaderいらず！？

以下はexampleというフォントファミリーにfont-display:blockを設定しているサンプルだ。

/* ウェブフォント example */
@font-face {
	font-family: 'example';
	font-display: block;
	src: url(https://example.com/webfont.woff2) format('woff2');
}

いつもの@font-faceにただ一行追加しただけだが、これでfont-displayをサポートしているブラウザでは、現在のChromeやFirefoxの様な表示方法になる。つまり、

ウェブフォントをダウンロードしている間テキストを透明に表示する
数秒（３秒が多い）経ってもダウンロードが完了していない場合は、フォールバックフォントに切り替えて、透明状態を解除する（タイムアウト)
ウェブフォントがダウンロード完了するとすぐに透明状態またはフォールバックフォントから、ウェブフォントでの表示に切り替える

このような表示方法だ。

例えばIEでは透明状態にすること無くすぐにフォールバックでレンダリングし、フォントのロード完了で切り替える仕様なので、上のような表示方法にしようとするとWebFontLoader等を使う必要があった。font-displayを利用すると、そのような煩わしさから開放されるというわけだ。まあ、IEがfont-displayに対応するかは知らないが。

さて、仕様を眺めるとfont-displayにはblock以外にも複数の値が用意されているようだ。

auto

初期値。ブラウザが定義したもの。

block

上記参照

swap

すぐにフォールバックフォントで描画し、ウェブフォントがロード終了しだい、切り替える。現在のIEのような感じ。FOUTが起きる。

fallback

100ms以下程度のすごく短い間テキストを透明にする
このすごく短い時間の間にフォントのロードが終わっていない場合フォールバックフォントで表示する
ロード開始から数秒間(3sぐらい？)の間にフォントのロードが終わればそのフォントに切り替えるが、終わっていないならそのままフォールバックフォントで表示し続ける

フォントのロードにあまりに時間がかかるようなら諦めると言った感じだろうか。確かに既にテキストを読み始めているのにフォントが切り替わるのはウザい。折衷的だが、本文などにはこれが良さそうだ。

optional

100ms以下程度のすごく短い間テキストを透明にし、その間にロードが終わればそのフォントで表示。終わらなければフォールバックフォントで表示。

感覚的に、ウェブフォントのキャッシュがあればそちらを利用する感じか。使い所が難しそうだ。

間違っているかもしれないし変更されるかもしれないので詳しくは仕様を見てほしいが、font-displayを上手く使うと、日本語ウェブフォントのようにロードに時間がかかるような場合に恩恵がありそうだ。

ところで、Ilya Grigorikのとても分かりやすいDEMOがあった。以下がそのデモのビデオだ。

意図的に遅い回線でのキャプチャだが、それぞれの値でタイムアウトやフォントの切り替えが起きているのがよく分かる。現在、font-displayは実験的な機能ではあるが、今や多くのウェブサイトでウェブフォントが利用されているのでかなり需要は高いはず。より多くのブラウザでのサポートが望まれるところだ。