Wie kann man sagen, wenn eine @ font-face-Regel angewandt wird

Question

Gibt es eine Möglichkeit zu sagen, wenn eine @ font-face-Regel angewandt wird? Ich erstelle @ font-face-Regeln, die Daten verwenden: mit einem synchronen XMLHttpRequest in JavaScript angeforderten URIs aus einer Font-Datei und dann Text in ein Canvas-Elemente schreiben sofort die Schriftart verwenden. Die Sache ist, dass es eigentlich nicht die Schriftart verwenden, wenn Sie den Text für die ersten paar Millisekunden zeichnen. Meine aktuelle Lösung ist die Ausführung für ein paar Millisekunden zu blockieren, indem sie einen synchronen XMLHttpRequest sendet, die eine schreckliche Lösung.

Ich kann nicht asynchron machen, wie es für die Implementierung ist Verarbeitung 's loadFont() Funktion, die synchron ist, in < a href = "http://processingjs.org/" rel = "nofollow noreferrer"> Processing.js .

Ich würde es vorziehen, dass die Lösung nicht die Dimensionen des Charakters überprüfen, da es keine Garantie gibt, dass die Schrift einen bestimmten Charakter hat und dass seine Dimensionen unterscheiden sie von dem gleichen Charakter der aktuellen Schriftart.

Answer 1

Kurze Antwort: Browser ist nicht gut genug, um uns noch für „geladen und einsatzbereit“ testen zu lassen, ohne tatsächlich die Schriftart zu verwenden und es zu überprüfen

.

Lange Antwort: Pjs kommt mit einer für Schrift Vorbelastungen in Schrift Validator gebaut (bezogen auf https: // Github .com / Pomax / font.js ), aber wie Sie darauf hinweisen, dass mit @ font-face-Regeln nicht funktionieren, die ein Daten-uri verwenden. Eine Abhilfe, die ich vorschlagen würde (obwohl ich das noch nicht ausprobiert habe. Ich kann nur raten werde es auf Grund meiner Arbeit auf Processing.js und Schrift Laden in Browsern) ist zwei PGraphic Offscreen-Puffer zu verwenden. Machen Sie sie beide weißen Hintergrund mit schwarzem Text füllen, machen einen Text ( „X“, 0,0) auf dem ersten Puffer, und dann nach der Schrift Last, verwenden Sie den zweiten Puffer den gleichen Text auszuführen ( „X“, 0, . 0" ) Besorgen Sie sich die Pixel [] für jeden Puffer, und machen Sie einen nebeneinander Vergleich:

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;
}

, wenn Sie Ihre Schriftart laden, hat ein Tracking-boolean irgendwo, die Schriftart Lastzustand anzeigt, intiliased auf „false“, und nach der Schrift laden, zu Beginn der draw () Aufruf

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.
  }
}

Jetzt zumindest können Sie die ersten Bilder vermeiden, in denen der Browser beendet hat Ihre Daten-uri Schriftart Auspacken und lud sie als @ font-face-Ressource, hat aber eine keine Zeit gehabt, um es in dem Canvas2D Rendering-System zu übergehen noch.

(an dieser Stelle ein DOM-Elements Styling mit der Schriftart würde fein tatsächlich funktioniert, es ist eigentlich immer es Canvas2D übergeben, die es verursacht nicht verwendbar sein eine oder mehrere Frames)

Answer 2

Auch wenn Sie nicht über eine Dimension Prüfung vorziehen, das ist, wie die Modernizr @ font-face Feature-Erkennung funktioniert und kann der beste Weg sein:

  

Modernizr bettet eine winzige Schrift Glyphen   unter Verwendung eines Daten: URI. Bei diesem wird die Single   "" Zeichen wird erzeugt; es ist dann   dessen in ein temporäres Element angewendet   innerHTML- wird auf ‚........‘ und   deren Breite gemessen wird, zunächst mit einem   Grund Serifenschrift und dann mit der   benutzerdefinierte Schriftart angewendet. Wenn die Breite   anders, kennen wir den Browser   die neuen Schriftart Daten, die wir gemacht   geliefert wird.