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时，请坚持使用bulletproof syntax，因为它是为了克服浏览器问题，就像您在这里遇到的问题一样。

Answer 2

我知道差不多一年了，但我也遇到了这个问题，花了半天时间才发现原因。您可以等待整个页面加载，而不是使用超时。 src: local()对我没有任何影响。所以你可以使用：

<body onload="finished()">

或在jQuery中：

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

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

2 个答案: