这个网页是如何加载这个字体的？

Question

我正在查看位于Font Awesome的网页。如果您打开此页面，您将看到它呈现所有Font Awesome的字体图标。我在IE中显示字体图标时遇到问题，但它们在IE中显示此页面，所以我试图破译它是如何组合在一起的。如果我查看site.css和beautify.css，那么任何地方都没有@ font-face指令。但是site.css引用了font-family说明符中的'FontAwesome'。有人能告诉我这个页面上'FontAwesome'是如何得到解决的吗？

更新

Ergg，我怎么会错过这个？遗憾...

Answer 1

有很多@font-face定义：

@font-face{
    font-family:'MuseoSans';
    src:url('../font/museosans_300-webfont.eot');
    src:url('../font/museosans_300-webfont.eot') format('embedded-opentype'), url('../font/museosans_300-webfont.ttf') format('truetype');
    font-weight:normal;
    font-style:normal
}

@font-face{
    font-family:'MuseoSans';
    src:url('../font/museosans_500-webfont.eot');
    src:url('../font/museosans_500-webfont.eot') format('embedded-opentype'), url('../font/museosans_500-webfont.ttf') format('truetype');
    font-weight:bold;
    font-style:normal
}

@font-face{
    font-family:'MuseoSlab';
    src:url('../font/museo_slab_300-webfont.eot');
    src:url('../font/museo_slab_300-webfont.eot') format('embedded-opentype'), url('../font/museo_slab_300-webfont.ttf') format('truetype');
    font-weight:normal;
    font-style:normal
}

@font-face{
    font-family:'MuseoSlab';
    src:url('../font/museo_slab_500-webfont.eot');
    src:url('../font/museo_slab_500-webfont.eot') format('embedded-opentype'), url('../font/museo_slab_500-webfont.ttf') format('truetype');
    font-weight:bold;
    font-style:normal
}

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

Answer 2

  

如果我查看site.css和beautify.css，那么任何地方都没有@ font-face指令。

是的，有。

Answer 3

如果你看site.css（接近结尾），你会发现@font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot')[...]。

有关如何使跨浏览器@font-face工作的详情，请参阅http://sixrevisions.com/css/font-face-guide/