私は現在、カスタムフォントを幅広く使用する顧客のための企業Webサイトを構築しています。font-faceが適用されたときを知る方法
jQueryのDOM対応では、動的な内容に基づいて動的な幅と高さを持つポップアップメニューを配置する場所を特定するために配置計算を行っています。
font-faceが適用される前にDOM-readyが起動され、幅と高さが正しくないため、これらの計算は失敗します。
今は（このプロトタイプのために）私はこの問題を緩和するためにDOMの準備ができてから500msの計算をしていますが、これは明白な理由のために生産に入ることができません。
最新のFirefoxとchromeでこの問題が確認されています。 IE 8は問題を抱えていないようですが、DOM-readyはかなり遅く発生しますので、遅延は私が推測する通りです:)
ロードイベントの待機はオプションではありません。あなたはこれです：
フォントフェースが適用されたときに検出する信頼できるクロスブラウザの方法はありますか？
なぜIEがこの問題を抱えているのか不思議の後に解決策が見つかりました。
font-faceが適用される前に、FirefoxとChrome/SafariによってDOMContentLoadedイベントがトリガーされ、問題が発生します。のである -
ソリューションはDOMContentLoadedのために聞くが、代わりにオールドスクールに行くとonreadystatechangeに耳を傾け、（私の知る限り私のテストによって言うことができるように）、フォント、顔が適用された後、常にトリガされdocument.readyState === 'complete'まで待たないことですもちろん、それはDOMContentLoadedをサポートしていないので、IEでは常に起こります。
jQueryの中のSO基本的にはロール自分で自分をできるイベントfontfaceappliedと呼ばれる - 多分それが組み込まれるべきである）
document.onreadystatechange = function() {
if (document.readyState === 'complete')
$(document).trigger('fontfaceapplied');
};
おかしい事実：Operaは右それをしないと、フォントまでDOMContentLoadedをトリガするために待機し - 面が適用されます。
+1。うーん。非常に興味深い、と素晴らしい研究のビット。共有していただきありがとうございます。私はこれを覚えておく必要があります。 （btw、私はあなたの近い将来....自己学習者のバッジを感じます。;-)） – Spudley
素晴らしい答えですが、Chrome（16.0.912.77）は、readystateが完全であると報告することがわかりました-faceは適用されていません。より正確には、キャンバスコンテキストのようなものでそれを使用しようとしている場合は、それが必ずしも利用可能ではありません適用されている場合。また、jQueryはreadyイベントを 'complete'まで実行するのを待たず、状態が 'interactive'の場合にも起動します。 – tapi
@tapi：jQuerys readyイベントはDOMContentLoadedをリッスンするので役に立たないカスタムフォントで使用されます。 –
タイムアウトが200ms後にトリガーするように設定すると、Googleフォントを使用しているときにこの問題が解決されます。
ジャンプが目立ちますが、通常は高さの等しいものがありますが、純粋主義者にとっては完璧ではないかもしれませんが、クロスブラウザで動作します。
これが役に立つかどうかわかりませんが、document.readyであなたの魔法をやっているのではなく、window.loadでそれをやろうとしています。画像などがロードされたときに少し遅れて起動しますが、フォントのちらつきがあるかもしれませんが、これは望ましくないようです。 – ddinchev
すでに述べたように、ロードイベントの待機はオプションではありません。 –
OK、あなたはフォントフェースを適用するために何を使用しますか？適切な場所で既に適切なイベントが発生している可能性のあるこの種の作業を行うライブラリがあります。 Cufon、FLIR、SIFRは、フォントの置き換えに対処するためのものであり、上記の問題を修正できなかった場合には驚かれることでしょう。 – ddinchev