0

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

同期であるProcessingのloadFont()関数をProcessing.jsに実装するために、これを非同期にすることはできません。

フォントに特定の文字があり、その寸法が現在のフォントの同じ文字と異なるという保証がないため、ソリューションでは文字の寸法をチェックしないことをお勧めします。

4

2 に答える 2

1

簡単な答え：ブラウザは、実際にフォントを使用して検証せずに、「ロードされてすぐに使用できる」ことをテストできるほど十分ではありません。

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

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つ以上のフレームが使用できなくなります）

于 2012-10-07T02:46:16.610 に答える
1

寸法チェックは好みませんが、それがModernizr @ font-face機能検出の仕組みであり、最良の方法である可能性があります。

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

于 2010-12-06T16:14:53.113 に答える