36

私は現在、カスタムフォントを幅広く使用している顧客向けの企業Webサイトを構築しています。

jQuery DOM対応では、配置計算を行って、動的コンテンツに基づいて動的な幅と高さのポップアップメニューを配置する場所を特定しています。

font-faceが適用される前にDOM-readyが起動され、幅と高さが正しくないため、これらの計算は失敗します。

現在（プロトタイプの場合）、DOMの500ミリ秒後に計算を行っています。この問題を軽減する準備ができていますが、明らかな理由で本番環境に移行できません。

この問題は、最新のFirefoxとChromeで確認されています。IE 8には問題がないようですが、DOM対応の起動はかなり遅いので、遅延は組み込みのようなものだと思います:)

ロードイベントを待つことはオプションではないので、あなたへの私の質問はこれです：

font-faceが適用されたことを検出するための信頼できるクロスブラウザの方法はありますか？

4

3 に答える 3

57

なぜIEがこの問題に悩まされないのか疑問に思った後、私は解決策を見つけました。

FirefoxとChrome/Safariは、DOMContentLoadedfont-faceが適用される前にイベントをトリガーするため、問題が発生します。

解決策は、リッスンするのではDOMContentLoadedなく、オールドスクールに行き、フォントフェイスが適用された後に常にトリガーさonreadystatechangeれるまで待つdocument.readyState === 'complete'ことです（私のテストでわかる限り）-もちろん、これはIEで常に発生しますをサポートしていませんDOMContentLoaded。

したがって、基本的には、jQueryで独自のイベントをロールすることができますfontfaceapplied-おそらくそれは組み込まれている必要があります;）

document.onreadystatechange = function() {
    if (document.readyState === 'complete') 
        $(document).trigger('fontfaceapplied');
};

面白い事実：Operaはそれを正しくDOMContentLoaded行い、 font-faceが適用されるまでトリガーを待ちます。

于 2011-07-13T12:29:08.413 に答える
9

ES6アップデート：

質問の投稿は何年も前のもので、IEdocument.fontsのバージョン8以前はまだ生きていて、Ecmascriptバージョン6もリリースされていませんでしたが、イベントでコールバックを作成できるようになりました。例えば：

document.fonts.onloadingdone = () => {
  // do something after all fonts are loaded
};

詳細については、この投稿を参照してください。

于 2020-03-03T22:08:19.797 に答える
0

200msのタイムアウト後にトリガーするように関数を設定すると、GoogleFontsを使用する際のこの問題が解決します。

目立ったジャンプがありますが、通常は同じ高さのものがあります。純粋主義者にとって、これは完璧ではないかもしれませんが、クロスブラウザで動作します。

于 2014-03-27T17:52:07.840 に答える