在Chromium中使用font-face时，元素的精确宽度

Question

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

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

如果您使用Chrome / Chromium访问该页面，它将立即计算包含文本的div的宽度，并在1秒后计算。在我的机器上，我得到两个截然不同的宽度答案。您是否有机会知道为什么这两个宽度计算会产生不同的结果？

我没有受过教育的猜测是，渲染font-face项目有一些奇怪的延迟，或者是因为加载文件的延迟或其他原因（虽然我的测试证明这个问题与获取字体文件无关）一条规则，我的理解是，插入完成后，插入到DOM中的动态元素将被正确布局，并且控制权将返回到javascript代码。

对我来说比理解“为什么”更重要的是了解如何正确调整此问题。您可能知道，IMG元素有一个“onload”事件，可用于在图像加载后查找图像的精确尺寸。是否有一些类似的事件可以在完全布局font-face元素时使用，以便针对此问题进行调整？对于如何获得使用font-face设计的元素的准确宽度而不仅仅是任意1秒的延迟，您还有其他建议吗？

非常感谢任何有关这个故障的提示，这些提示正在阻碍我的工作，StackOverflow读者同意！

BTW-我最近问了一个相关的问题（http://stackoverflow.com/questions/4636079），但更进一步缩小了这个问题，导致了这个更具体的新问题。

Answer 1

这绝对是一个问题，谷歌的字体加载器无法解决这个问题

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宽度值没有了。谷歌字体加载器完成了这个技巧，在加载器的“fontactive”事件弹出后调用了我所有的div测量功能。工作得很完美。

Answer 5

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

但我发现了2个问题：

• 有点恼火，它需要等到字体加载原因 当你加载页面并执行时，它会导致“弹出/跳跃” 字体开关。
• 它适用于除Safari之外的所有浏览器（最新Chrome，Firefox，IE9，Opera） 。不知道为什么。