Ich benutze Angular 2 und Webpack. Stile werden zu eckigen Komponenten ohne Verkapselung hinzugefügt.So stellen Sie sicher, dass benutzerdefinierte Schriftart geladen wird
Es gibt ein Problem mit benutzerdefinierten Schriftarten - scheint wie sie asynchron geladen werden, so dass einige Komponenten, die ihre Größe in dem Moment messen, in dem sie erstellt werden, es mit anfänglicher Schriftart anstelle von benutzerdefinierten tun.
Wie kann ich dieses Problem lösen?
Wie ich verstehe, gibt es keine hilfreichen Ereignisse ... Ich dachte über CURRECNT Schriftart überprüfen und einige Dela setzen, aber fand keine Möglichkeit, die aktuelle Schriftart des Elements zu chech. Der berechnete Wert wird immer zurückgegeben, auch wenn eine solche Schriftart nicht angewendet wird.
Oder vielleicht eine eckige/webpack-spezifische Lösung angewendet werden?
~function() {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://fonts.googleapis.com/css?family=Shrikhand&_='+Date.now();
document.head.appendChild(link);
var dest = document.getElementById('dest');
console.log(getComputedStyle(dest).fontFamily);
var width = getComputedStyle(dest).width;
dest.style.width = width;
}();body {
font-family: 'Shrikhand', cursive;
}
p {
outline: 1px dotted red;
float: left;
clear: left;
white-space: nowrap;
}<p style="font-family: initial;">Need to handle font loading</p>
<p id="dest">Need to handle font loading</p>
<p>Need to handle font loading</p>
können Sie warten auf 'load' Ereignis auf' link' –
@JaromandaX, Schnipsel ist nur ein Beispiel. Ich weiß nichts über Stile, die Ereignisse in das Webpack laden, und so etwas gibt es im eckigen Objektleben nicht. Könnten Sie bitte mit dem ursprünglichen Problem helfen? – Qwertiy
Die Frage "Wie kann ich sicherstellen, dass die benutzerdefinierte Schriftart geladen wird" - Ich schlage vor, auf das "load" -Ereignis auf dem von Ihnen erstellten Link zu warten, um die benutzerdefinierte Schriftart zu laden - wie geht das nicht auf das ursprüngliche Problem ein - wenn das Snippet isn ' t nützlich, um die Frage zu beantworten, warum sie überhaupt einbeziehen? –