由于@font-face，jQuery 计算出错误的高度答案

【问题标题】：jQuery working out wrong height, due to @font-face由于@font-face，jQuery 计算出错误的高度
【发布时间】：2011-03-19 16:02:13
【问题描述】：

我对 jQuery 和 @font-face 有疑问。

我需要计算出<div> 的高度，这可以正常工作，但是字体加载会有一点延迟，一旦加载，@font-face 字体实际上比备用字体，因此高度小于应有的高度。

我尝试过使用 Modernizr，但这没有用，因为它只检测浏览器是否支持@font-face，而不是字体是否已加载。

jQuery 代码在 $(document).ready 中，但我猜字体不会延迟它的触发。有什么想法吗？

【问题讨论】：

你试过用 $(window).load 代替 document.ready 吗？
感谢亚当，这太完美了。

标签： javascript jquery html css

【解决方案1】：

正如Adam 指出的那样，完美的解决方案是使用$(window).load 而不是$(document).ready

$(window).load(function(){  
  $(".column").equalHeights();
});

【讨论】：

此方法在 Firefox 中效果很好，但在 Chrome 中无效。最后我保留了$(document).ready，然后将我的函数放在一个持续时间为0的setTimeout中（实际上这大约是4ms - developer.mozilla.org/en-US/docs/Web/API/…）

【解决方案2】：

只要您从 google、typekit 或 assender 加载字体，Google 字体 api 就可以正常工作。但是，如果您正在使用其他东西（例如从 fontsquirrel 下载的另一种字体），您可能想尝试类似 this 的东西来确定正在呈现的字体。您可能还想查看有关确定正在使用的字体的讨论Changing Body Font-Size based on Font-Family with jQuery

【讨论】：

【解决方案3】：

您可能想查看 Google 字体 API (http://code.google.com/apis/webfonts/docs/webfont_loader.html)。我相信它会动态加载字体并触发一些您可以采取行动的事件（用于调整 's 的大小）。

【讨论】：