我在最新版本的 Chromium 中遇到了这个问题。在使用通过 @font-face 嵌入的字体系列创建第一个元素后,我收到了错误的 offsetXyz 值。当脚本执行时,window.onload Hook 已经触发,字体也因此已经加载。
这是脚本的样子(示意图):
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);
该值“悄无声息”地更新。似乎没有办法等待它更正值,而只是简单地设置间隔检查值,然后呈现解决方案。我不想做那样肮脏的事情。
有人对如何进行有任何建议吗?仅在未指定 src: local("... ")
时发生,因此问题是下载字体特定的。
最佳答案
你自己已经给出了答案。设置 src: local()
并且它不会发生 - 通常当你使用 @font-face
时,坚持使用 bulletproof syntax ,因为它是为了克服浏览器问题而设计的,例如您在这里遇到的问题。
关于javascript - @Font-face 和 offsetWidth 属性的错误值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5998137/