在Chromium中使用字体时元素的准确宽度

Question

嗨，随机Stackoverflow访客-感谢您阅读我的问题！

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

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

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

对我而言，比了解“为什么”发生更重要的是了解如何针对此问题进行适当调整。 您可能知道，IMG元素具有一个“ onload”事件，可用于在图像加载后查找图像的准确尺寸。 为了完全解决此问题，是否已经完全布局了字体元素，是否可以使用类似的事件？ 您还有其他建议，如何获得准确的以font-face样式设置的元素宽度，而又不仅仅具有任意的1秒延迟？

非常感谢您，有关此故障的任何提示使我的工作停滞不前，其他StackOverflow读者！

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

Answer 1

这绝对是一个问题，无法使用Google的字体加载器解决

http://code.google.com/apis/webfonts/docs/webfont_loader.html

因为它在Safari中不起作用。 弄清楚为什么会很好，因为与@ font-face结合使用时，目前似乎没有准确的方法来读取容器的宽度和高度，除了在document.ready事件之后添加延迟之外。 但是增加延迟仍然是猜测，并且最终是一个不好的解决方案。

Answer 2

您是否尝试过document.ready和window onload ？

另外，如果与刷新（F5）有关，则它看起来像是网络问题，因为呈现问题会在每次页面加载时引起问题。

Answer 3

我通过做更多的研究发现了部分答案。

此处的关键是在创建动态元素并检查其宽度之前，先确定何时激活并加载了字体字体100％的字体。 一种似乎有效的方法是使用Google Webfont Loader（http://code.google.com/apis/webfonts/docs/webfont_loader.html），然后将动态生成代码放在“ fontactive”中事件。 这样，看来我每次使用的任何浏览器中的文本宽度都是可靠的，没有任何延迟。

我没有找到没有此字体加载器的方法（尽管当然可以，因为字体加载器只是一个JavaScript库）

Answer 4

有同样的问题，正在努力找出为什么我的div宽度值不正确的原因。 Google字体加载器完成了这一技巧，在加载器的“ fontactive”事件弹出后，我才调用了我所有的div测量功能。 做得完美。

Answer 5

也有同样的问题。像前面提到的海报一样，测试了Google Webfont Loader。

但是我发现了2个问题：

• Kinda有点烦人，它需要等到加载字体后才导致在加载页面并执行字体切换时引起“弹出/跳转”。
• 除Safari之外 ，它可在所有浏览器（最新的Chrome，Firefox，IE9，Opera）上运行。 不知道为什么。