@ Czcionka i niewłaściwa wartość atrybutu przesunięciaWidth

Występuje ten problem w najnowszej wersji Chromium. Po utworzeniu pierwszego elementu za pomocą rodziny czcionek osadzonej za pomocą @ font-face otrzymuję błędne wartości przesunięciaXyz. Do czasu wykonania skryptu hak window.onload zostanie uruchomiony, a czcionka zostanie już załadowana.@ Czcionka i niewłaściwa wartość atrybutu przesunięciaWidth

To właśnie skrypt wygląda (w uproszczeniu):

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);

Wartość jest aktualizowana "po cichu". Wygląda na to, że nie ma sposobu oczekiwania na poprawienie wartości, ale po prostu setInterval - sprawdź wartość, a następnie wyrenderuj rozwiązanie. Nie lubię robić takich brudnych rzeczy.

Ktoś ma jakieś sugestie, jak postępować? Dzieje się tak tylko wtedy, gdy nie podano parametru src: local(" ... "), dlatego problem jest związany z pobraną czcionką.

Źródło

2011-05-13 Witiko

Może znajdziesz jakąś pomoc tutaj: http://paulirish.com/2009/fighting-the-font-face-fout/ - wydaje się, że dość często zdarza się, że niektóre przeglądarki wyświetlają tekst "unstyled", dopóki czcionka nie zostanie pobrana, a następnie przełączona. – James

Cóż, tak jak powiedziałem, czcionka powinna już być załadowana, gdy wykonam skrypt, jak się nazywa ** po ** wywołanym zdarzeniu window.onload. Jest już załadowany i wizualnie zastosowany, gdy element jest dołączony do treści dokumentu. Tylko wartość przesunięcia jest niewłaściwa. – Witiko

Sam już udzieliłeś odpowiedzi. Ustaw src: local(), a tak się nie stanie - ogólnie, gdy używasz @font-face, trzymaj się numeru bulletproof syntax, ponieważ został stworzony w celu przezwyciężenia problemów związanych z przeglądarką, takich jak ten, który wywołuje głowy tutaj.

Źródło

2011-06-19 11:43:39

Wiem, że minął prawie rok, ale dostałem ten problem i zabrałem pół dnia, aby odkryć przyczynę. Możesz po prostu czekać na załadowanie całej strony zamiast limitu czasu. src: local() nie zrobił dla mnie żadnej różnicy. Więc można użyć:

<body onload="finished()">

lub w jQuery:

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

Źródło

2012-01-22 07:28:37 hugotacito

Czy nie jest przyjemniej iść z drugim podejściem (jak w ** nie ** wkładaniu rzeczy do BODY-tag)? –

@ Czcionka i niewłaściwa wartość atrybutu przesunięciaWidth

Odpowiedz

Powiązane problemy