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

【问题标题】：@Font-face and wrong value of the offsetWidth attribute@Font-face 和 offsetWidth 属性的错误值
【发布时间】：2011-08-25 06:48:27
【问题描述】：

我在最新版本的 Chromium 中遇到了这个问题。在使用通过 @font-face 嵌入的字体系列创建第一个元素后，我收到了错误的 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(" ... ") 时才会发生，因此问题是特定于下载字体的。

【问题讨论】：

也许你可以在这里找到一些帮助：paulirish.com/2009/fighting-the-font-face-fout - 对于某些浏览器来说，在字体下载然后切换之前显示“无样式”文本似乎是相当普遍的。
好吧，正如我所说，当我执行脚本时，字体应该已经被加载，因为它在 window.onload 事件触发之后被调用。当元素附加到文档正文时，它已经被加载并在视觉上应用。只是偏移值不对。

标签： javascript fonts css font-face

【解决方案1】：

你自己已经给出了答案。设置src: local()，它不会发生 - 通常，当您使用@font-face 时，请坚持使用bulletproof syntax，因为它是为了克服您在此处遇到的浏览器问题而设计的。

【讨论】：

【解决方案2】：

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

<body onload="finished()">

或在 jQuery 中：

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

【讨论】：

采用第二种方法不是更好吗（如 not 将东西放入 BODY-tag 中）？