Firefox nie może renderować ikon z zestawu czcionek Awesome

W przeglądarce Firefox (Windows 7) ikony i glify wywoływane z pakietu Font Awesome nie są poprawnie renderowane. Przykład tego można zobaczyć na stronie internetowej Khan Academy. Poniżej wideo ikony są pokazane jako pola z kodami szesnastkowymi. Oznacza to, że Firefox nie jest pobierany.

Jak wygląda w Chrome (Windows 7), Safari (Mac OS X) i Stainless (Mac OS X):

Znalazłem to pytanie na temat przepełnienia stosu, które może wyjaśnić, dlaczego tak się dzieje - CSS używa pojedynczych cudzysłowów, aby zawrzeć lokalizację src czcionki. Jednak nie mam dostępu do zapisu na serwerach Khan Academy, więc nie mogę modyfikować faktycznej strony. Chcę wiedzieć, czy można to naprawić w Firefoksie i jak. Mogę uruchomić skrypty Greasemonkey, jeśli to pomoże. Próbowałem już ręcznie pobrać czcionkę i dodać ją do folderu czcionek systemu Windows, ale to nie pomaga.

Dla porównania, CSS, który ustawia tę czcionkę (niepoprawnie przetwarzany przez Firefox) to:

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

Aktualizacja: Odkryłem, że Firefox poprawnie wyświetla ikony czcionek w witrynie pakietu Font Awesome (link powyżej). Po sprawdzeniu CSS i porównaniu z CSS Khan Academy stwierdzam, że oba kody są dokładnie takie same, z wyjątkiem tego, że po ostatnim atrybucie CSS KA nie ma średnika (jeśli zignorujesz fakt, że jest skompresowany). Czy brak średnika powoduje ten problem?

Problem opisany w pytaniu został naprawiony przez Khan Academy poprzez zmianę wszystkich ścieżek z ./na /fonts/(na przykład ./fontawesome-webfont.ttfzmiany na /fonts/fontawesome-webfont.ttf). Wydaje mi się, że Firefox nie może odczytać plików ze specjalnego katalogu „kropka” (który po prostu odnosi się do bieżącego katalogu).

PS: Brak średnika w CSS po ostatnim atrybucie nie powoduje tego problemu.

Dodatkowe komentarze:

Twoja edycja dotycząca .prefiksu jest problemem związanym z serwerem, a nie sposobem, w jaki Firefox obsługuje pliki. KA odwoływały się do plików czcionek z niewłaściwej lokalizacji - losowo

Błędny! Czcionki działały poprawnie w trzech innych przeglądarkach, o czym wspomniałem już dawno temu, co oznacza, że ​​czcionki były we właściwej lokalizacji. ./Wyjaśniłem, że to Firefox miał problem ze ścieżką, co zmusiło KA do przeniesienia plików czcionek do nowej, niepotrzebnej lokalizacji ./, umożliwiając Firefoxowi prawidłowe odczytanie plików czcionek. Dlatego jest to kwestia tego, jak Firefox obsługuje pliki.

Prawdopodobnie nie jest to odpowiedź na postawione pytanie, ale na tyle powiązana, aby pomóc ludziom, którzy trafiają tutaj z nieco innym problemem, który daje taki sam wynik, jak pokazano na zrzutach ekranu.

Firefox blokuje użycie czcionki w innej (pod) domenie

Przeczytaj także komentarze do tych postów, dają one dobrą radę.

Zrobiłem zmiany ścieżki, aby poprawnie uruchomić IE, Firefox i Chrome, w następujący sposób: ( URL, aby zobaczyć )

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