@ font-face和offsetWidth属性的值错误 [英] @Font-face and wrong value of the offsetWidth attribute

问题描述

我在最新版本的Chromium中遇到此问题。在使用通过 @ font-face 嵌入的字体族创建第一个元素后，我被错误的offsetXyz值。到脚本执行时，window.onload钩子已经被触发，字体将被加载。

I encounter this problem in the latest version of Chromium. After the creation of the first element using a font-family embedded via @font-face I am being handed wrong offsetXyz values. By the time the script is executed, the window.onload hook will already have fired and the font will thus have already been loaded.

这是脚本的样子示意图）：

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

值将静默更新。似乎没有办法等待它来更正值，而只是简单地通过setInterval检查值，然后渲染解决方案。我不喜欢做那样的脏东西。

The value is updated "silently". There appears to be no way of waiting for it to correct the values but simply setInterval-check the value and then render the solution. I don't fancy doing dirty stuff like that.

任何人有任何建议如何进行？仅当未指定 src：local（...）时才会发生，因此下载的问题是字体特定的。

Anyone has any suggestions how to proceed? Happens only when the src: local(" ... ") isn't specified, the issue is hence downloaded-font specific.

推荐答案

您已经给出了答案。设置 src：local（）并不会发生 - 一般来说，当你使用 @ font-face 防弹语法，因为它是为了克服浏览器问题，如一个你在这里跟头。

You have already given the answer yourself. Set src: local() and it will not happen - in general when you use @font-face, stick to the bulletproof syntax, since it was made to overcome browser issues like the one you are butting heads with here.

这篇关于@ font-face和offsetWidth属性的值错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！