FOIT/FOUT
#Tech
それぞれ「Flash of Invisible Text」「Flash of Unstyled Text」の略。
Webフォントをレンダリングする際に、ロードタイミングによってフォント表示がチラつく現象のこと。
Webフォントのロード手順
ブラウザは下記のようなフローでフォントを読み込む。
それぞれのチェックポイントで、FOITやFOUTのような現象が発生し得る。
https://gyazo.com/5ddd4bae0dfdc75892874555702f6b1f
https://drafts.csswg.org/css-fonts-4/#font-display-timeline
FOIT
前: ナビゲーション直後のテキストが表示されない状態
後: Block periodが終わり、文字が見えるようになる
FOUT
前: 表示されている文字がローカルのだいたいフォントで表示されている状態
後: Swap periodが終わり、文字が実装者の想定したWebフォントに置き換わる
制御方法
その昔は、Webフォントのロード完了を頑張って計測してから適用するハックが散見された。
ハック: 画面外に小さな<span>などを作ってWebフォントを適用、サイズが変わったらロード完了とする、など
現代では font-displayという@font-face内で利用できるプロパティによって自動的に制御できる。
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/font-display
Google Fontではフォントをロードするcssにdisplayクエリを渡すことで書き換えられるようになった。
https://github.com/google/fonts/issues/358
いろいろプロパティがあるが、たぶん使うのはblockとswapくらいだろう。
font-display: block
Block: 3s　Swap: Infinite
3秒以内にロードが終わったら、3秒後にWebフォントを表示
3秒以内にロードが終わらんかったら代替フォントを表示、ロード完了を待ってWebフォントを表示
アイコンフォントなど、代替フォントの表示を極力避けたい時に使う
font-display: swap
Block: 0　Swap: Infinite
代替フォントを利用、ロード完了を待ってWebフォントを表示
代替フォントでテキストを出しつつ、最終的に意図通りのスタイルにしたい時に使う
脳死で選択する場合はこのプロパティを選ぶ