@ Font-face e valore errato dell'attributo offsetWidth

Ho riscontrato questo problema nell'ultima versione di Chromium. Dopo la creazione del primo elemento utilizzando una famiglia di caratteri incorporata tramite @ font-face, mi vengono consegnati valori offsetXyz errati. Nel momento in cui viene eseguito lo script, il hook window.onload sarà già stato attivato e il font sarà quindi già stato caricato.@ Font-face e valore errato dell'attributo offsetWidth

Questo è ciò che lo script sembra (schematicamente):

var e = document.createElement("span"); 
e["innerText" in e?"innerText":"textContent"] = "fooBar"; 
e.style.fontFamily = "fontFaceEmbeddedFontFamily"; 
document.body.appendChild(e); 

alert(e.offsetWidth); // Returns two different values 
setTimeout(function() { 
    alert(e.offsetWidth); // The latter being correct 
}, 1000);

Il valore viene aggiornato "silenziosamente". Sembra che non ci sia modo di attendere che corregga i valori, ma semplicemente setInterval: controlla il valore e poi visualizza la soluzione. Non mi piace fare cose sporche del genere.

Qualcuno ha qualche suggerimento su come procedere? Succede solo quando non è specificato il src: local(" ... "), il problema è quindi scaricato, specifico per i caratteri.

fonte

2011-05-13 Witiko

Forse si può trovare qualche aiuto qui: http://paulirish.com/2009/fighting-the-font-face-fout/ - Sembra che sia abbastanza comune per alcuni browser visualizzare il testo "non animato" fino a quando il carattere non è stato scaricato e quindi passato. – James

Bene, come ho detto, il font dovrebbe già essere caricato quando eseguo lo script come viene chiamato ** dopo ** l'evento window.onload attivato. È già caricato e applicato visivamente quando l'elemento viene aggiunto al corpo del documento. Solo il valore di offset è sbagliato. – Witiko

Hai già dato la risposta da soli. Imposta src: local() e non accadrà. In generale, quando utilizzi lo @font-face, attenersi allo bulletproof syntax, poiché è stato creato per risolvere i problemi del browser come quello con cui si sta lavorando.

fonte

2011-06-19 11:43:39

So che è quasi un anno, ma ho avuto anche questo problema e mi ci sono voluti mezza giornata per scoprire la causa. Puoi solo aspettare che venga caricata l'intera pagina, invece di usare un timeout. Il src: local() non ha fatto alcuna differenza per me. Così si può utilizzare:

<body onload="finished()">

o in jQuery:

$(window).load(
    function() { 
     // this only will execute when the entire page is loaded. 
    } 
);

fonte

2012-01-22 07:28:37 hugotacito

Non è più carino andare con il secondo approccio (come in ** non ** mettere le cose nel tag BODY)? –

@ Font-face e valore errato dell'attributo offsetWidth

risposta

Problemi correlati