如何知道是否已加载字体（@ 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的默认行为。）