Geek Answers Handbook

@ Font-face and incorrect attribute value offsetWidth

I ran into this problem in the latest version of Chromium. After creating the first element using the font family embedded via @ font-face, I get the wrong offsetXyz values. By the time the script is executed, hook.conload will already be running, and the font will thus already be loaded.

Here is what the script looks like (schematically):

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

The value is updated silently. There seems to be no way to wait for it to fix the values, but just setInterval - check the value and then display the solution. I do not like to do such dirty things.

Anyone have suggestions on how to proceed? It happens only when src: local(" ... ") not specified, so the problem is downloaded as a font.

+8
javascript css fonts css3 font-face
source share
2 answers

You yourself have already answered. Install src: local() and it won’t happen - usually when you use @font-face , stick to bulletproof syntax as it was done to overcome browser issues like the ones you aim for here.

+1
source share

I know that this is almost a year, but I also have this problem, and I got half a day to find out the reason. You can just wait for the entire page to load, instead of using a timeout. src: local() doesn't matter to me. So you can use:

 <body onload="finished()">

or in jQuery:

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

More articles: