Firfox の開発版で css font-display がフラグ付きで有効になったようなので試してみた。
まずはフラグを有効にする。
FIrefox のアドレス欄へabout:configと入力し、設定画面を開く。
そこでlayout.css.font-display.enabledを検索し、値をtrueへ。これで機能が有効となる。
Chrome の開発版ではすでに導入されているらしく、下記記事が非常に参考になった。
やはりFOUTをネイティブの機能で解決することが期待されるよう。
今までは主に Web Font Loader を導入したり、 あと Adobe Blank なんてのもあった気が…。
とにかく涙ぐむしい努力をしてきたので人類にとって、これは待望の機能かなと。
現時点での実装はスペックの推奨通りでクロームと同様のよう。
設定値はfallbackがベストで、妥協してblockといった感じだろうか。パフォーマンスとユーザビリティの両方にバランスよく配慮できそうである。
1@font-face { 2 font-family: 'Waiting for the Sunrise'; font-style: normal; font-weight: 400; font-display: fallback; src: local('Waiting for the Sunrise'), local('WaitingfortheSunrise'), url('../fonts/waiting-for-the-sunrise-v7-latin-regular.woff2') format('woff2'), url('../fonts/waiting-for-the-sunrise-v7-latin-regular.woff') format('woff'), url('../fonts/waiting-for-the-sunrise-v7-latin-regular.ttf') format('truetype');}
その他の値も少しの違いながら明確に用途がわかれそうなので、なかなかよくできている感じ。
will-changeのように必要そうな部分へは先行導入しておき、ブラウザの対応を待ってもいいかと。