Javascript 计算容器'；加载字体文件后的字体高度

使用

@font-face

使用非标准字体设置web样式要求浏览器在进行真正的格式转换之前首先下载字体文件（就像下载其他资源，如CSS、JavaScripts等）

当jQuery

.height（）

尝试计算其容器的高度时，这在Chrome（v16.0.912.63）和Safari（v5.1.2）上引入了一个问题。在字体完成加载之前，计算的高度为。考虑下面的（视图：）：

/*CSS*/
h1{
字体系列：MuseoSlab-500，“Helvetica Neue”，Helvetica，Arial，无衬线；
/*MuseoSlab-500是使用@font-face定义的*/
}
/*HTML*/
这是我的长头球。你怎么认为？现在呢？
/*JavaScript*/
$（函数（）{
警报（“上面的高度=“+$（'div#box'）.height（））；
});

但是，Firefox（v8.0.1）能够计算正确的高度，即在使用非标准字体呈现文本之后

问题是是否有一种实用的方法告诉Chrome，或者理想情况下所有浏览器，在进行计算之前，等待文本使用预期字体呈现

---

使用

$（window）.load（）

可以工作，但这意味着等待所有图像完成加载；它的速度太慢了。

我认为

$（window）.load（）

是处理您正在谈论的内容的唯一方法。如果页面加载速度太慢，可能需要优化图像，甚至在页面加载后加载图像。

您可以尝试使用谷歌提供的webfont loader

使用此方法处理webfonts时，可以指定一些javascript回调：在您的情况下，需要指定

fontActive

回调

fontactive（fontFamily，fontDescription）

在每个请求的web字体完成加载时调用。fontFamily参数是字体系列的名称，fontDescription表示字体的样式和重量

请注意，您可以从任何站点加载webfonts，但不一定是从google加载，这在该页面中有明确的说明

除了google、typekit、ascender和monotype选项外，还有一个自定义模块，可以从任何web字体提供商加载样式表

---

如果您以前使用过它，它能否加载一个指定了

@font-face

的本地样式表？您提到了从任何提供者加载样式表，但我不确定它是否适用于本地样式表。

/* CSS */
h1 {
  font-family: MuseoSlab-500, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* MuseoSlab-500 is defined using @font-face. */
}

/* HTML */
<div id="box">
  <h1>This is my long header. What do you think? How about now?</h1>
</div>

/* JavaScript */
$(function() {
  alert("The height of the above <div> = " + $('div#box').height());
});