字体文件加载完成后计算容器高度

Question

使用@font-face来为网页设置非标准字体时，需要浏览器先下载字体文件（就像它下载其他资源如CSS、JavaScript等），然后才能进行真正的渲染。

这会导致Chrome（v16.0.912.63）和Safari（v5.1.2）出现问题，当jQuery .height() 试图计算其容器的高度时，在字体加载完成之前就已经计算出了高度。请考虑以下示例（查看：工作示例）：

/* 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());
});

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

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

使用$(window).load()是可行的，但这意味着需要等待所有图像加载完成，会导致速度变慢。

- moey

Answer 1

我认为$(window).load()是处理你所说问题的唯一方式。如果你的页面加载速度太慢，也许你需要优化你的图片，甚至在页面加载后再加载它们。

- Wes Crow

Answer 2

你可以尝试使用谷歌提供的Web字体加载器。

http://code.google.com/apis/webfonts/docs/webfont_loader.html#Events

当您使用此方法处理Web字体时，可以指定一些JavaScript回调函数：在您的情况下，您需要指定fontActive回调函数。

fontactive（fontFamily，fontDescription）

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

请注意，您可以从任何网站加载Web字体，不一定是从Google加载，如该页面中清楚解释的那样。

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

- Fabrizio Calderan

---

如果您以前使用过它，它能否加载指定了@font-face的本地样式表？您提到可以从任何提供者加载样式表，但我不确定它是否适用于本地样式表。 - moey