Javascript $.width（）在使用自定义字体时返回不同的结果

情况如下：

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

CSS（在

部分）：

... 和
#福{
字体系列：“海岬一号”，衬线；
}

当我使用标准字体（例如Arial）时，一切正常（

.width（）

在两种情况下返回相同的结果）

---

除了

设置超时

之外，还有什么不同的解决方法来获得适当的

.width（）

值并保留自定义字体吗？

因为它加载的是一种远距离字体。您应该使用

$（window）.load（）

而不是

$（document）.ready（）

：第一个将在下载了所有远程字体/样式表/脚本和图像后触发，第二个将仅在DOM准备就绪时触发。

您能否显示

foo

是什么（关于元素的定义方式），如果有任何事件附加到它？找到了这个：@OfirBaruch确实他和我有同样的问题

$（window）。load（）

完成了任务。谢谢哇，真的吗？我寻找这个问题的答案已经有一年了。真不敢相信这么简单。

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