@Font-face和offsetWidth属性的错误值

Question

我在最新版本的Chromium中遇到了这个问题.在使用通过@ font-face嵌入的font-family创建第一个元素之后,我被错误地传递了offsetXyz值.当脚本执行时,window.onload挂钩已经被触发,因此字体已经被加载.

这是脚本的样子(示意图):

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

该值将"静默"更新.似乎没有办法等待它来更正值,而只是setInterval-检查值,然后渲染解决方案.我不喜欢那样的脏东西.

任何人有任何建议如何进行？仅在src: local(" ... ")未指定时发生,因此下载问题 - 字体特定.

Answer 1

你自己已经给出了答案。设置src: local()它就不会发生 - 一般来说，当您使用时@font-face，请坚持防弹语法，因为它是为了克服浏览器问题而设计的，就像您在这里遇到的问题一样。