visjs Symbole sind nicht in Chrom

Question

Ich benutze mit visjs und stieß auf ein mysteriöses Problem, wo die Symbole der Knoten nicht angezeigt werden, wenn die Webseite angezeigt wird. Die Symbole werden erst nach dem Klicken auf den Bereich angezeigt, in dem sie angezeigt werden. einem jsfiddle verfolgt (nicht von mir), die das gleiche Problem zu reproduzieren: http://jsfiddle.net/adgd87/szt7h6kv/

Hier ist der Code:

var nodeSet = [{ 
     id: 1, 
    shape: 'icon', 
    icon: { 
    face: 'FontAwesome', 
    code: '\uf286', 
    size: 40, 
    color: '#57169a' 
    }, 
    label: '1: fa-fort-awesome - f286', 
}, { 
    id: 2, 
    shape: 'icon', 
    icon: { 
    face: 'FontAwesome', 
    code: '\uf1d1', 
    size: 40, 
    color: '#f0a30a' 
    }, 
    label: '2: fa-empire - f1d1' 
}]; 

// create an array with nodes 
var nodes = new vis.DataSet(nodeSet); 

// create an array with edges 
var edges = new vis.DataSet([{ 
    from: 1, 
    to: 2 
}, { 
    from: 1, 
    to: 3 
}]); 

// create a network 
var container = document.getElementById('mynetwork'); 
var data = { 
    nodes: nodes, 
    edges: edges 
}; 
var options = { 
    layout: { 
    randomSeed: 2 
    }, 
    edges: { 
    arrows: 'to' 
    }, 
    legend: { 
    enabled: true 
    } 
}; 

var network = new vis.Network(container, data, options); 

Vielen Dank für alle Tipps

Answer 1

Was passiert ist, dass die Schriften nicht gewesen sein Wenn die Zeichensätze in der Regel einen Unicode-Bereich verwenden, der normalerweise ohne Zeichen gefüllt wird, wird ein rechteckiges Rechteck angezeigt. Wenn die Schriftart geladen ist, kann die Zeichen-Engine mit der richtigen Schriftart neu streichen, sodass die Bilder angezeigt werden. Gewöhnlich verwenden Zeichnungs-Engines eine faule Zeichentechnologie, daher ist click ein einfacher Weg, um sie auszulösen.

Nun aber die komplexe Frage: Wie kann man wissen, wann die Font-Assets geladen sind? Verfolgen Sie den Ladevorgang einer Schriftart ist eine extrem komplizierte Aufgabe, die jetzt von der neuen CSS Font Loading W3C spec adressiert wird.

Die Unterstützung sie es doch, wenn auch nicht toll, wie Sie auf der Can I use Seite sehen:

ein Timeout verwenden es keine Lösung ist, sind Sie nur wetten, dass das Timeout bald auslösen wird nach Die Schriftart wurde geladen. Dies gilt nicht, wenn die Benutzerverbindung von einem Mobilgerät stammt.

Dies bedeutet, dass Sie einige Helfer dafür benötigen, und glücklicherweise existiert ein Cross-Browser-Helfer dafür, und es heißt WebFontLoader.

Was müssen Sie damit zu tun ist Vorbelastung die Schrift, dann vuejs starten:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script> 
<script> 
    WebFont.load({ 
    custom: { 
     families: ['My Font'] 
    }, 
    // startYourChart is your function that starts the chart drawing 
    // when the font is loaded start to draw the chart 
    active: startYourChart, 
    // The detection in older browser for FontAwesome doesn't always work 
    // so this one makes sure that your chart starts after a loading timeout 
    inactive: startYourChart 
    }); 
</script> 

Im Fall Sie verwenden Angular gibt es eine handliche Wrapper für WebFontLoader hier: angular-webfontlaoder. Im example.html es zeigt, wie es zu benutzen:

var app = angular.module('TestApp', ['webfont-loader']); 
app.controller('TestController', function($scope) { 
    $scope.$on('webfontLoader.loaded', function() { 
    alert('font loaded!'); 
    }); 
}); 

P. S. Für weitere Informationen darüber, wie Font Laden Werke und Strategien es hier einige interessante Seiten zu optimieren:

• Controlling Font Performance with font-display
• Better @font-face with Font Load Events
• A Comprehensive Guide to Font Loading Strategies