要素のスタイルを改善するためにフォントの読み込みステータスを検出するにはどうすればよいですか?

強化された要素のスタイル設定のためのフォントの読み込みステータスの検出

Font-Awesome を使用するときは、対応するアイコンが表示される場合にのみアイコンが表示されるようにすることが重要です。フォントファイルがロードされました。これを実現するには、フォントがロードされているかどうかを知ることが重要です。

jQuery-FontSpy.js を Rescue に入力してください

プラグインである jQuery-FontSpy.js を入力してくださいさまざまなフォントのテキスト文字列の幅を比較して、カスタム フォントが読み込まれているかどうかを判断します。これにより、開発者はフォントの読み込みステータスに基づいて要素のスタイルをきめ細かく制御できます。

実装

jQuery-FontSpy.js を統合するには、単にそれをJavaScript ファイル内の参照。このプラグインは、次のようなカスタマイズ用のさまざまなオプションを使用します。

• font: チェックするカスタム フォント ファミリーを指定します。
• onLoad: フォントのロード時に適用する CSS クラス。
• onFail: フォントの読み込みに失敗した場合に適用する CSS クラス。
• testFont:比較に使用される Web セーフ フォント。
• testString: フォント幅の計算に使用される文字列。
• timeOut: フォントの読み込みアニメーションが無期限に行われないようにするためのタイムアウト期間。

プラグインの適用

1 回jQuery-FontSpy.js が含まれており、.fontSpy() 関数を使用して要素に適用できます。たとえば、次のコード スニペットは、bannerTextChecked クラスの要素にプラグインを適用します。

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

可視性制御のスタイリング

要素の可視性を制御するにはフォントの読み込み時に、hideMe やfontFail.

.hideMe {
  visibility: hidden !important;
}
.fontFail {
  visibility: visible !important;
  /* fall back font */
  /* necessary styling so fallback font doesn't break your layout */
}

結論

jQuery-FontSpy.js は、フォントの読み込みステータスを検出するための信頼できるソリューションを開発者に提供します。提供されているオプションと CSS スタイルを利用することで、利用可能なフォントに要素がシームレスに適応する、スムーズで動的なユーザー エクスペリエンスを作成できます。

以上が要素のスタイルを改善するためにフォントの読み込みステータスを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。