@font-face を使用してカスタム フォントがロードされたことをどのように検出できますか?

カスタム フォント (@font-face) の読み込みを検出する方法?

@font-face を使用してカスタム フォントを組み込む場合ルールに従って、フォント ファイルがいつ正常にロードされたかを判断することが重要です。この知識がないと、フォントが使用可能になるまでプレースホルダー文字 (例: "") が表示される問題が発生する可能性があります。

解決策: jQuery FontSpy.js

一般的なソリューションは jQuery FontSpy.js プラグインです。これを使用すると、カスタム フォントが

実装

FontSpy.js を利用するには、次の手順に従います。

1. プラグインの JavaScript ファイルプロジェクト。


2. カスタム フォントを表示する要素に fontSpy 関数を適用します。


3. onLoad クラスや onFail クラスなどのオプションを構成します。フォントがロードされた場合、またはロードに失敗した場合に適用されます。

このプラグインは、2 つの異なるフォントで表示される文字列の幅を比較することによって機能します。幅が異なる場合は、カスタム フォントが正常に読み込まれたことを示します。

コード例

次のスニペットを考えてみましょう。これは、FontSpy.js を要素に適用します。クラスmy-icons:

<br>$(document).ready(function() {<br> $('.my-icons').fontSpy({</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">onLoad: 'show-icons',
onFail: 'hide-icons'

ログイン後にコピー

});
});

カスタム フォントが読み込まれたらを実行すると、show-icons クラスが要素に適用され、アイコンが表示されます。フォントのロードに失敗した場合は、代わりにアイコン非表示クラスが適用されます。

追加の考慮事項

• フォールバック フォント: を指定しますカスタム フォントが失敗した場合に表示する fontSpy 設定内のフォールバック フォントload.
• Timeout: FontSpy.js には、無限待機を防ぐためのタイムアウト メカニズムが含まれています。潜在的な遅延を回避するには、timeOut オプションを構成します。
• ブラウザのサポート: FontSpy.js は、Chrome、Firefox、Safari、Edge などの最新のブラウザをサポートします。
• クロスオリジン フォント: FontSpy.js はクロスオリジン フォントの読み込みを処理しますシームレスに。

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