Как этот шрифт загружается этой веб-страницей?

Question

Я смотрю на веб-страницу, расположенную по адресу Font Awesome . Если вы откроете эту страницу, вы увидите, что она отображает все иконки шрифтов Font Awesome. У меня возникла проблема с отображением значков шрифтов в IE, но они отображаются в IE для этой страницы, поэтому я пытаюсь понять, как они составляются. Если я посмотрю на site.css и beautify.css, директивы @ font-face нигде нет. Тем не менее, site.css ссылается на 'FontAwesome' в спецификаторе семейства шрифтов. Может кто-нибудь сказать мне, как «FontAwesome» решается на этой странице?

UPDATE

Эргг, как я это пропустил? К сожалению ...

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/