壊れたアイコン表示を防ぐために、CSS `@font-face` フォントがロードされたことをどのように検出できますか?

CSS @font-face のフォント読み込みステータスの検出

問題:
を使用してフォントを統合する場合@font-face の場合、アイコンは最初、スタイルのない円の代わりに ⓘ 記号が付いているように表示される場合があります。彼らの意図したデザイン。この問題は、フォント ファイルのロードに時間がかかるために発生します。

クエリ:
適切なアイコンを確保するために @font-face フォント ファイルがロードされているかどうかを確認するにはどうすればよいですか?表示?

答え:

jQuery-FontSpy.js プラグイン:

このオープンソース プラグインはフォントの読み込みステータスを検出しますComic Sans MS (広く利用可能なフォント) でレンダリングされた文字列の幅を、レンダリングされた同じ文字列と比較することによってロードしたいカスタムフォントで。幅が異なる場合、カスタム フォントは正常に読み込まれています。

Customization:

• onLoad: フォントが読み込まれるときにクラスが追加されます。
• onFail: の場合にクラスが追加されました。フォントの読み込みに失敗しました。
• testFont: 「Comic Sans MS」などの広く利用可能なフォント。
• testString: 幅に使用される固有の文字列比較。
• 遅延: フォント幅間の時間チェック。
• timeOut: フォント障害とみなされるまでの最大待機時間。

使用法:

1. jQuery-FontSpy.js プラグインをHTML.
2. フォントの読み込みを検出したい要素に .bannerTextChecked クラスを適用します。
3. プラグインを初期化します:

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

4. フォントの読み込みに基づいて要素の可視性を制御するカスタム CSS クラスを定義するstatus.

例:

.hideMe {
  visibility: hidden !important;
}

.fontFail {
  visibility: visible !important;
  /* Style to resemble the custom font */
}

追加メモ:

• FontAwesome の互換性は現在サポートされていません。
• 詳細とライブ デモについては、次のサイトを参照してください。 https://patrickmarabeas.github.io/jQuery-FontSpy.js

以上が壊れたアイコン表示を防ぐために、CSS `@font-face` フォントがロードされたことをどのように検出できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。