Internet Explorer не будет отображать значок шрифта с помощью @ font-face

Question

У меня возникли проблемы с получением шрифта для правильной загрузки в IE (IE9). Прекрасно работает в Chrome.

Вы можете увидеть вопрос, посмотрев на это Fiddle. В IE9 отображается окно, в то время как в Chrome отображается звезда.

Я пользуюсь предложенным пакетом FontAwesome here. Я думаю, что проблема заключается в объявлении @ font-face в верхней части .css-файла (показано ниже). Кто-нибудь может понять, почему IE не будет отображать этот шрифт?

@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 1

Выяснил проблему. У меня IE9 в режиме совместимости. Когда я отключил это, шрифт начал появляться.

Answer 2

В jsfiddle, вы не устанавливать font-family для любого элемента, вы используете курсив (i элемента), но ваш @font-face указует только обычный шрифт, а jsfiddle не демонстрирует проблему, потому что @font-face отсутствует (и не будет работать там, поскольку URL-адреса являются относительными).

Кроме того, ваш jsfiddle пытается создать сгенерированный контент, а не обычный контент. Используемый символ - это символ частного использования (U + F060), и такие символы не должны передаваться и использоваться, за исключением частных соглашений.

Лучше всего изолировать проблему в простейшем случае, чтобы устранить последствия других проблем (таких как проблемы с созданным контентом).