在Chromium中使用字体时元素的准确宽度 [英] Accurate width of element when using font-face in Chromium

问题描述

您好，随机出现Stackoverflow访问者-感谢您阅读我的问题！

Hi random Stackoverflow visitor- Thanks for reading my question!

这是一个演示我的问题的最小页面: http://lisperati.com/text_bug/text_bug. html

Here is a minimal page that demonstrates my problem: http://lisperati.com/text_bug/text_bug.html

如果您使用Chrome/Chromium访问该页面，它将立即和在1秒后计算包含文本的div的宽度.在我的机器上，关于宽度，我得到两个非常不同的答案.您是否有机会知道这两个宽度计算得出不同结果的原因?

If you visit that page with Chrome/Chromium it will calculate the width of a div containing text, both immediately and after 1 second. On my machines I get two very different answers as to the width. Any chance you know the reason for why these two width calculations give different results?

我没有任何根据的猜测是，由于加载文件的延迟或其他原因，渲染字体项目时会有一些奇怪的延迟(尽管我的测试表明此问题与获取字体文件无关)通常，我的理解是，插入到DOM中的动态元素将在插入完成并将控件返回到javascript代码后立即正确布置.

My uneducated guess is that there is some weird delay in rendering font-face items, either because of the delay for loading the file or otherwise (Though my tests show evidence that this problem is not related to fetching the font file) As a rule, my understanding is that dynamic elements inserted into the DOM will be correctly laid out as soon as the insertion is complete and control is returned to the javascript code.

对我来说，比了解发生这种情况的原因"更重要的是了解如何针对此问题进行适当的调整.您可能知道，IMG元素有一个"onload"事件，可用于在图像加载后查找图像的准确尺寸.为了完全解决此问题，是否已将某些字体元素完全布置好，可以使用类似的事件吗?您还有其他建议，如何获得准确的以font-face样式设置的元素的宽度，而又不仅仅具有任意的1秒延迟?

More important for me than understanding "why" this happens is to understand how to properly adjust for this issue. As you probably know, IMG elements have an "onload" event that can be used to find accurate dimensions of an image after it has been loaded. Is there some similar event that can be used for when a font-face element has been fully laid out, in order to adjust for this issue? Do you have any other advice for how to get an accurate width of an element styled with font-face without simply having an arbitrary 1 second delay?

非常感谢这个困扰我工作的小技巧，其他StackOverflow读者！

Thanks so much for any tips on this glitch that's holding up my work, fellow StackOverflow reader!

顺便说一句-我最近问了一个相关的问题(http://stackoverflow.com/questions/4636079)，但范围缩小了很多，导致出现了这个新的，更具体的问题.

BTW- I asked a related question recently (http://stackoverflow.com/questions/4636079) but have narrowed down the issue much more, leading to this new, more specific question.

推荐答案

您是否尝试过document.ready，window onload?

如果与刷新(F5)有关，那么它看起来像是网络问题，因为呈现问题会在每次加载页面时引起问题.

Also if it's related to refresh (F5) then it looks like a network issue, because a rendering issue would cause problems on every page load.

这篇关于在Chromium中使用字体时元素的准确宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！