SVG node.getBBox falsch bei der Verwendung von @ font-face

Question

Ich habe etwas Text, der mit Raphael.text() gerendert wird und mit font-family Attribute, die Schriftarten verwenden mit @ font-Face geladen.

Ich benutze OpenType, um die Schriftart zu laden und es als Base64 rendern und das in meinem Stylesheet zu injizieren.

Hier einige Pseudo-Code:

// In my css 
opentype.load('someFontFamily', (err, font) => { 
    // Inject in stylesheets 
    const path = paper.text(x, y, 'Hello World') 
    .attr({ 
     'font-family': 'someFontFamily' 
     'font-size': 100 
    }) 
    path.getBBox() // Calls path.node.getBBox() in RaphaelJS 
}) 

Das Problem ist folgendes. Die Größe, insbesondere die Breite, die von getBBox zurückgeworfen wird, spiegelt nicht die Schriftfamilie wider, sondern eine abstrakte, unbekannte generische Schrift (sie ist nicht ganz so breit wie die Fallbackschrift, also nicht sicher, was sie ist).

Die html/Seite zeigt korrekt mein SVG mit der gewünschten Schriftart. Ich kann es inspizieren und der Browser sieht die richtige Größe.

Es ist keine Frage des Wartens, ich habe Timeouts versucht. Es scheint, dass der einzige Weg, es funktioniert, wenn die Schriftart im Browser geladen ist (durch ein Element auf der Seite mit der Familie und die Verwendung von @font-face in meinem CSS, die eine Auslösung des Font-Download vor jedem SVG-Rendering verursacht.

ich habe meine Schriften als @font-face Erklärungen vor dem Laden der Seite, aber es macht keinen diff versucht hinzuzufügen.

wie kann ich SvG zurückzukehren, um die Größe reflektiert die Schrift zeigt es? ich vermute, es ist eine interne Timing Frage zu bekommen. es ist fast wie eine Notwendigkeit, ein Callback/Event für die Post render.

Answer 1

Ok. Veröffentlichen Sie eine Antwort für den Fall, dass es nützlich für einige andere arme Seele.

Es gibt tatsächlich einige Implementierungen der @ font-face Loadereignisse.

Hier ist eine gute article auf diesem.

Cross-Browser-Unterstützung ist immer noch fraglich, aber Schriftart Observer sieht aus wie eine vielversprechende Bibliothek:

• https://github.com/bramstein/fontfaceobserver

Ebenfalls von Interesse ist:

• https://github.com/zachleat/fontfaceonload

Einige Browser unterstützen diese Ereignisse nativ. Nach dem Rendern meines Textes kann ich anrufen:

document.fonts.load('70px someFontFamily') 
    .then(function() { 
    console.log(path.node.getBBox()) 
    })