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

Question

我正在查看位于Font Awesome的网页。如果你打开这个页面，你会看到它渲染了Font Awesome的所有字体图标。我有一个问题，使字体图标显示在IE中，但他们显示在IE的这个页面，所以我试图破译它是如何放在一起。如果我查看site.css和beautify.css，就会发现任何地方都没有@font-face指令。然而，site.css在字体系列说明符中引用了'FontAwesome‘。谁能告诉我“FontAwesome”是如何在这个页面上被解析的？

更新

厄格，我怎么会错过这个呢？抱歉..。

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，到处都没有@

-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/