Textbox verursacht Problem mit Schriftarten in Stoff js

Question

Ich füge einfach text Element in Stoff js diesen Code verwenden,

var t = new fabric.IText("Hello world !", { 
    backgroundColor: '#FFFFFF', 
    fill: '#000000', 
    fontSize: 25, 
    top : 50, 
    left:50 
}); 
canvas.add(t); 

Und seine Arbeit perfekt, jetzt ausgeben, wenn ich Schriftart wie dies in der Art Zugabe bin,

<style type="text/css"> 
    @import url(//fonts.googleapis.com/css?family=Playfair+Display); 
</style> 

Zugabe Dann textbox in Leinwand fabricjs wie diese verwenden,

var t = new fabric.IText("Hello world !", { 
    backgroundColor: '#FFFFFF', 
    fill: '#000000', 
    fontFamily:'Playfair Display', 
    fontSize: 25, 
    top : 50, 
    left:50 
}); 
canvas.add(t); 

Mit Schriftart angewendet, Aber wenn ich auf Texbox in Canvas klicken, können Sie sehen, Textfeld hat Problem wie diese http://awesomescreenshot.com/0f05taz2f3. Dies geschieht jedoch nur, wenn Sie die Seite zum ersten Mal laden oder die Seite zum erneuten Laden mit ctrl+f5 erzwingen. Hier ist das fiddle zweite Mal, es lädt perfekt.

Answer 1

Die Schriftart wurde bis zum Hinzufügen des Texts nicht vollständig geladen. Dies bedeutet, dass Fabric die Breite des Elements basierend auf der Standardschriftart anstelle Ihres Webfont bestimmt.

Sie können warten, bis die Schriftart geladen wurde, bevor Sie sie zur Zeichenfläche hinzufügen. This question hat einige Antworten darauf, wie man das richtig macht.

Answer 2

Dies ist ein known issue auf Fabric GitHub Repo und es wird angenommen, dass daran gearbeitet wird.