6

情况如下：

$(document).ready(function(){
  // this will return different result
  alert($('#foo').width());
  // than this !!!
  setTimeout(function(){
    alert($('#foo').width());
  }, 1000);
});

CSS（<head>部分）：

<link href='http://fonts.googleapis.com/css?family=Headland+One' rel='stylesheet' type='text/css'>
... and
#foo {
    font-family: 'Headland One', serif;
}

当我使用标准字体（例如 Arial）时，一切都很好（.width()在两种情况下都返回相同的结果）

setTimeout除了获得正确的.width()值并保留自定义字体之外，还有什么解决方法吗？

4

1 回答 1

9

因为它加载了一个遥远的字体。您应该使用$(window).load()而不是$(document).ready()：第一个将在所有远程字体/样式表/脚本和图像都已下载时触发​​，第二个仅在 DOM 准备好时触发。

于 2012-08-26T19:32:22.680 回答