FOUC を回避するために @font-face を使用してフォントがロードされたことを検出するにはどうすればよいですか?

@font-face を使用したフォントの読み込みステータスの検出

多くの場合、Web 開発者はアイコンやフォントが次のような状態で表示される状況に遭遇します。フォント ファイルが完全にロードされるまで、プレースホルダー文字を使用しません。これは、ユーザー エクスペリエンスに混乱をもたらしたり、混乱を引き起こしたりする可能性があります。この問題に対処するには、フォントがいつロードされたかを知ることが重要です。

フォントのロード検出の問題

質問で言及されている特定のシナリオでは、Font-Awesomeフォント ファイルの読み込みに時間がかかるため、アイコンは最初は  で表示されます。目標は、フォントが読み込まれるまでこれらのアイコンを非表示にして、Web サイトの外観と機能を強化することです。

フォント読み込み検出ソリューション

全体の待機中ロードするページが実行できない場合でも、フォントが具体的にロードされているかどうかを確認する方法があります。効果的なアプローチの 1 つは、2 つの異なるフォントでレンダリングされた文字列の幅を比較することです。

jQuery-FontSpy.js Plugin

このプロセスを簡素化するために、jQuery-FontSpy .js プラグインが開発され、GitHub で入手可能です(https://github.com/patrickmarabeas/jQuery-FontSpy.js)。このプラグインは、フォントの読み込みを検出し、それに応じてスタイルを適用する直感的な方法を提供します。

jQuery-FontSpy.js の使用

プラグインを使用するには、プラグインの JavaScript ファイルをプロジェクトを作成し、ターゲット要素で初期化します。フォントの読み込みステータスに基づいて追加または削除するカスタム クラスを指定できます。例:

<span class="bannerTextChecked">FontAwesome Icon</span>

$(document).ready(function() {
    $('.bannerTextChecked').fontSpy({
        onLoad: 'hideMe',
        onFail: 'fontFail anotherClass'
    });
});

FOUC 削除用の CSS

スタイルのないコンテンツのフラッシュ (FOUC) を完全に削除するには、適切な CSS を適用します。ルール:

.hideMe {
    visibility: hidden !important;
}

.fontFail {
    visibility: visible !important;
    /* fallback font */
    /* apply necessary styling to avoid layout issues with the fallback font */
}

結論

フォント読み込み検出技術を利用すると、フォントが完全に読み込まれた場合にのみ表示されるようにすることで、ユーザー エクスペリエンスを向上させることができます。 jQuery-FontSpy.js を使用すると、このプロセスが簡単になり、特定のフォントの読み込みステータスに基づいてスタイルを追加できるようになります。

以上がFOUC を回避するために @font-face を使用してフォントがロードされたことを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。