@ font-faceルールが適用されるタイミングを確認する方法

StackOverflow https://stackoverflow.com/questions/1817474

質問

@ font-faceルールがいつ適用されるかを知る方法はありますか？データを使用する@ font-faceルールを作成しています。JavaScriptの同期XMLHttpRequestで要求されたフォントファイルからURIを作成し、そのフォントを使用してすぐにキャンバス要素にテキストを書き込みます。問題は、最初の数ミリ秒間テキストを描画するときに実際にフォントを使用しないことです。私の現在の解決策は、同期XMLHttpRequestを送信して数ミリ秒実行をブロックすることです。これはひどい解決策です。

処理の loadFont（） Processing.js の同期関数。

フォントに特定の文字があること、およびそのサイズが現在のフォントの同じ文字と異なることが保証されないため、ソリューションが文字のサイズをチェックしないことをお勧めします。

役に立ちましたか？

解決

簡単な答え：ブラウザはまだ十分に十分ではなく、「ロード済みですぐに使用できる」ことをテストできます。実際にフォントを使用して検証することなく。

長答：Pjsには、フォントプリロード用の組み込みフォントバリデーターが付属しています（ https：// githubに関連しています） .com / pomax / font.js ）ですが、指摘したように、data-uriを使用する@ font-faceルールでは機能しません。私が提案する回避策（まだ試していないが、Processing.jsとブラウザーでのフォントの読み込みに関する作業に基づいて機能すると推測している）は、2つのPGraphicオフスクリーンバッファーを使用することです。白い背景に黒い塗りつぶしテキストを作成し、最初のバッファーでtext（＆quot; X＆quot;、0,0）を実行し、フォントを読み込んだ後、2番目のバッファーを使用して同じtext（＆quot; X＆quot ;, 0,0＆quot;）。各バッファーのピクセル[]を取得し、並べて比較します。

boolean verifyFontLoad() {
  buffer1.loadPixels();
  buffer2.loadPixels();
  for (int i=0; i<buffer1.pixels.length; i++) {
    if (buffer1.pixels[i] != buffer2.pixels[i]) {
      return false; }}
  return true;
}

フォントをロードするとき、フォントのロード状態を示す追跡ブール値を「false」に設定し、フォントをロードした後、draw（）呼び出しの開始時に

void draw() {
  // code that does not rely on your font
  [...]

  // check state
  if(!fontLoaded) { fontLoaded = verifyFontLoaded(); }
  // not ready? "stop" drawing.
  if(!fontLoaded) { return; }
  // font ready. run code that relies on the font being ready
  else {
    // code that depends on your font being available goes here.
  }
}

少なくとも、ブラウザがdata-uriフォントのアンパックを完了して@ font-faceリソースとしてロードした最初の数フレームを回避できますが、Canvas2Dレンダリングシステムに渡す時間はありません。まだ。

（この時点でフォントを使用してDOM要素をスタイリングすると実際に正常に機能します。実際にはCanvas2Dに引き継がれているため、1つ以上のフレームを使用できません）

他のヒント

ディメンションチェックを好まない場合でも、 Modernizr @ font-face 機能検出が機能し、最良の方法である可能性があります：

  

Modernizrは小さなフォントグリフを埋め込みます   データの使用：URI。これで、シングル   ＆quot;。＆quot;キャラクターが作成されます。その時です   その一時要素に適用されます   innerHTMLは「........」に設定され、   その幅が最初に測定される   基本的なセリフフォントと   カスタムフォントが適用されます。幅が   異なる、私たちはブラウザを知っています   新しいフォントデータをレンダリングしました   

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top