Firefox не може відображати піктограми із набору веб-шрифтів Font Awesome

У Firefox (Windows 7) піктограми та гліфи, які викликаються з пакету Font Awesome , не відображаються належним чином. Приклад цього можна побачити на веб-сайті Академії Хана. Внизу відео піктограми показані у вигляді коробок із шестигранними кодами. Це означає, що Firefox не завантажується.

Як це відображається в Chrome (Windows 7), Safari (Mac OS X) та Stainless (Mac OS X):

Я знайшов це питання на переповнюванні стека, яке може пояснити, чому це відбувається - CSS використовує одинарні лапки, щоб закрити місце розташування шрифту. Однак у мене немає доступу для запису на сервери Khan Academy, тому я не можу змінювати фактичний веб-сайт. Хочу знати, чи можна це виправити у Firefox та як. Я можу запустити сценарії Greasemonkey, якщо це допоможе. Я вже намагався завантажити шрифт вручну та додати його до папки Шрифти Windows, але це не допомагає.

Для довідки, CSS, який встановлює цей шрифт (не обробляється належним чином Firefox):

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

[class^="icon-"]:before,
[class*=" icon-"]:before
{
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-decoration:inherit
}

Оновлення: я виявив, що Firefox правильно відображає піктограми на основі шрифту на веб-сайті пакету Font Awesome (пов’язаний вище). Після огляду CSS та порівняння з CSS CSS Khan, я виявляю, що обидва коди абсолютно однакові, за винятком того, що після останнього атрибута CSS KA немає крапки з комою (якщо проігнорувати той факт, що він стиснений). Чи не викликає проблеми цю крапку з комою?

Проблема, описана у питанні, була виправлена ​​Академією Хана, змінивши всі шляхи від ./на /fonts/(наприклад, ./fontawesome-webfont.ttfзміни до /fonts/fontawesome-webfont.ttf). Мені здається, що Firefox не в змозі читати файли зі спеціального каталогу «крапка» (який просто посилається на поточний каталог).

PS: Відсутність крапки з комою в CSS після останнього атрибута не викликає цієї проблеми.

Додаткові коментарі:

Ваша редакція щодо .префікса - це проблема сервера, а не те, як Firefox обробляє файли. KA посилалися на файли шрифтів із неправильного місця - випадкового

Неправильно! Шрифти працювали правильно у трьох інших браузерах, як я вже давно згадував, що означає, що шрифти знаходились у правильному місці. ./Я зрозуміла, що проблема Firefox із шляхом, як я пояснив, який змусив KA переміщувати файли шрифтів на нове місце, яке не потрібно ./, дозволяючи Firefox також правильно читати файли шрифтів. Тому це питання про те , як Firefox обробляє файли.

Ймовірно , НЕ відповідь на поставлене запитання, але пов'язані з досить , щоб допомогти людям , які в кінцевому підсумку тут з трохи іншою проблемою , яка виробляє один і той же результат , як показано на скріншотах.

Firefox блокує використання шрифту, який знаходиться в іншому (суб-) домені

Читайте також коментарі до цих публікацій, вони дають хороші поради.

Я змінив шлях, щоб запустити IE, Firefox та Chrome правильно: ( URL-адресу для перегляду )

@font-face{
  font-family:'FontAwesome';
  src:url('ogi/bete/font/fontawesome-webfont.eot?v=3.0.1');
  src:url('/ogi/bete/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), 
  url('/ogi/bete/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('ogi/bete/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }