Firefox не может отображать иконки из набора шрифтов Font Awesome

Question

В Firefox (Windows 7) значки и глифы, вызываемые из пакета Font Awesome , отображаются неправильно. Пример этого можно увидеть на сайте Академии Хана. Под видео значки отображаются в виде прямоугольников с шестнадцатеричными кодами в них. Это означает, что он не загружается Firefox.

Как это выглядит в Chrome (Windows 7), Safari (Mac OS X) и Stainless (Mac OS X):

Я нашел этот вопрос о переполнении стека, который может объяснить, почему это происходит - CSS использует одинарные кавычки для включения местоположения src шрифта. Однако у меня нет прав на запись на серверы 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 из Khan Academy я обнаружил, что оба кода абсолютно одинаковы, за исключением того, что после последнего атрибута для CSS KA не ставится точка с запятой (если вы игнорируете тот факт, что он сжат). Причиной этой проблемы является отсутствие точки с запятой?

Answer 1

Проблема, описанная в этом вопросе, была исправлена Khan Academy путем изменения всех путей с ./ на /fonts/ (например ./fontawesome-webfont.ttf изменяется на /fonts/fontawesome-webfont.ttf). Мне кажется, что Firefox не может читать файлы из специального каталога "точка" (который просто ссылается на текущий каталог).

PS: отсутствие точки с запятой в CSS после последнего атрибута не вызывает этой проблемы.

Дополнительные комментарии:

Ваше редактирование о . Префикс - это проблема сервера, а не то, как Firefox обрабатывает файлы. KA ссылались на файлы шрифтов из неправильного места - случайно

Некорректное! Шрифты работали правильно в трех других браузерах, как я уже упоминал в вопросе давно, что означает, что шрифты были в правильном расположении. Ясно, что в Firefox была проблема с путем ./ как я объяснил, что заставило KA переместить файлы шрифтов в новое местоположение, которое не нужно ./ , что позволило Firefox также правильно читать файлы шрифтов. Поэтому вопрос о том , как Firefox обрабатывает файлы.

Answer 2

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

Firefox блокирует использование шрифта в другом (суб) домене

Также читайте комментарии к тем постам, они дают хороший совет.

Answer 3

Я изменил путь, чтобы правильно запустить 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 }