on:2017年7月26日sponsorsWebフォントを使用しているサイトやブログが増えてきました。60がリリースされました。Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。Masses下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。ブラウザでフォントが読み込まれる仕組みfont-displayプロパティとはほとんどの場合、swapを使用したいと思うでしょうfont-displayがサポートされていない場合サードパーティのフォントプロバイダについてブラウザでフォントが読み込まれる仕組みわたし達が使用しているブラウザは疑うまでもなく、多くの機能が入念に実装されたプログラムです。その中の一つに、フォントの読み込みがあります。ブラウザがフォントを読み込む時、そのフォントを使用するようにスタイルされたテキストは、フォントが読み込まれるまで隠されます。Text」テキストが一瞬見えない現象です。読み込み時にテキストが一瞬見えない現象この現象は文字化けしていないテキストの表示を避けるためにありますが、遅い表示がビジターにイライラを感じさせるかもしれません。ほとんどのブラウザはデフォルトで、フォントが読み込まれるのを待つ間にフォールバックテキストを表示するまで、テキストを3秒間隠します。Safariなど他のブラウザではさらに長い時間、レンダリングされないテキストが残されます。ObserverのようなJavaScriptを使用して、フォントが読み込まれた時を追跡することです。最初にシステムフォントを使用して、スタイルを適用します。カスタムフォントがJavaScript経由で読み込まれたことを検出すると、ドキュメントにカスタムフォントを適用するCSSのクラスを与えます。Regularを適用するとします。下記のように指定します。sans-serif;}これでフォントが読み込まれると、ArialまたはHelvetica(システムで使用可能なフォントに依存)が最初に表示されます。RegularがJavaScriptを使用して読み込まれていることを確認したら、<html>タグにfonts-loadedのクラスを適用します。SansをこのCSS経由で<p>タグに適用します。Regular";}この方法はうまく機能しますが、扱いにくい場合があります。そこで新しいCSSのプロパティ「font-display」の登場です。49で実験的な機能として登場した新しいCSSのプロパティで、OperaやAndroid用のOperaにも実装されています。60で正式に採用されます。font-displayプロパティのサポート状況font-displayを使用することで、JavaScriptベースのソリューションとほぼ同じ方法でフォントを表示する方法を制御することができます。一行のCSSでOKです!まずは、font-displayプロパティの値を知っておきましょう。典型的なブラウザのフォント読み込み動作が行われます。これは、カスタムフォントを使用する書体を非表示にし、フォントの読み込みが完了したときに影響を受けるテキストを表示します。カスタムフォントが読み込まれるまで、フォールバックテキストはすぐに表示されます。ほとんどの場合、これがわたし達が求めているものです。JavaScriptを使用したソリューションのほとんどは、この設定をエミュレートすることを目指しています。これはautoとswapの間の折衷案です。カスタムフォントでスタイルされたテキストが表示されない短い時間(Googleによれば100ms)があり、その後にスタイルのないテキストが表示されます(カスタムフォントがこの時点までにロードされていない場合)。フォントが読み込まれると、テキストのスタイルが適切に設定されます。影響を受けたテキストが最初は表示されず、その後フォールバックフォントに移行するという点で、fallbackのように動作します。同じなのはそこまでです。optionalではブラウザ側でもフォントを使用するか自由に決めることができ、この動作はユーザーの接続スピードに左右されます。接続が遅い場合にoptionalを指定すると、カスタムフォントがまったく読み込まれないことがあります。font-displayの値が分かったので、@font-faceルールに適用してみましょう。Regularの@font-face宣言でswap値を指定してみます。swap;}この例ではWOFF2ファイルのみを使用して指定を省略していますが、ここでは簡潔にする予定です。この例では、font-displayにswapを使用しています。この指定は、下図のように表示されます。swap;」を指定した時の表示JavaScriptでフォントの読み込みを制御するとき、これがわたし達が求めているものです。テキストがデフォルトで表示されていることを確認してから、カスタムフォントがダウンロードされた後に適用されます。要素にfont-familyを指定するときは、コンマ区切りのフォントリストを使用します。フォールバックとは、カスタムフォントの後に指定しているシステムフォントのことです。Regularで、システムフォントはHelveticaとArialです。swap;」で最初に表示されるフォントは、最初に指定したシステムフォントです。カスタムフォントが読み込まれると、最初に表示されたシステムフォントが読み込まれ、置き換えられます。fallbackとoptionalの他のfont-displayの値にを使用することは、カスタムフォントで何をするかを決める前に、スタック内のシステムフォントのフォールバックに依存します。ほとんどの場合、swapを使用したいと思うでしょう使用する値が分からない場合は、swapを使用してください。カスタムフォントとコンテンツのアクセシビリティのバランスが最適化されるだけでなく、JavaScriptに依存したのと同じフォントの読み込み動作が提供されます。ページにフォントを読み込ませるけど、最終的に表示させたくない場合は、fallbackまたはoptionalがよいでしょう。font-displayがサポートされていない場合font-displayの唯一の懸念事項が、サポートブラウザが多くないことです。それに対応するには、2つの選択肢があります。あなたは単にfont-displayを使うことができます。サポートされていないブラウザでは、提供するメリットは得られないだけです。これは何も壊さないという点で必ずしも悪いわけではありませんが、一瞬表示されないブラウザを使用しているユーザーが離れる可能性があります。font-displayがサポートされているか検出し、代替手段を提供することができます。時間とリソースが許せば、これがベストです。font-displayがブラウザにサポートされているか検出するのは、簡単です。*/}これは、完璧なフォールバックです。Observerのようなサードパーティーのスクリプト、Firefox、Chrome、Operaで利用可能なネイティブのフォントロードAPIを利用するかを決めることができます。fonts-loaded";}}}※より正確なクロスブラウザ対応にするには、コメントを参考にしてください。ここでは通常のルートに進み、フォントロードAPIが移行を処理するようにします。APIはフォントがロードされていることが分かると、<html>タグにfonts-loadedのクラスを適用します。このクラスを適用すると、カスタム書体の進行形のアプリケーションを可能にするCSSを書くことができます。Regular";}わたし達はfont-displayのような短いCSSを使用して、これらが実現することを望んでいますが、必要に応じて別のソリューションでフォールバックする必要もあります。時間が経つにつれて、フォントロードAPIのようなソリューションは他のブラウザでも導入されることが予想されます。サードパーティのフォントプロバイダについてGoogleフォントやTypeKitなど、サードパーティのサービスを使ってフォントを埋め込むのであれば、することはあまりありません。font-displayプロパティは、@font-face宣言の内部で使用する必要があるからです。フォントプロバイダが提供するCSSは手を加えることができないため、font-displayプロパティを加えたり変更するができません。時間が経つにつれて、これらのプロバイダがfont-displayプロパティを含むCSSに変更したり、埋め込みコードのオプションとして許可する可能性があります。いずれにしてもこのfont-displayプロパティは、Webタイポグラフィに歓迎されます。JavaScriptでは扱いにくい種類のタスクを大幅に簡素化できます。