如何知道是否已加载字体（@ font-face）？

Question

如何知道是否已加载字体（@ font-face）？

我正在使用Font-Awesome，但是在未加载字体文件时，图标显示为。

所以，我希望这些图标display:none不会加载文件。

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;}

我怎么知道这些文件已经加载，我终于能够显示图标了？

编辑： 我没有在页面加载（onload）时说话，因为字体可以在整个页面之前加载。

Answer 1

试试由Google和Typekit开发的WebFont Loader（github repo）。此示例首先以默认的serif字体显示文本; 然后在加载字体后，它会以指定的字体显示文本。（此代码在所有其他现代浏览器中重现Firefox的默认行为。）