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 ikony wyglądają w przeglądarce Firefox

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

Jak ikony wyglądają w innych przeglądarkach

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?

firefox fonts

— ADTC
źródło

Wygląda na to, że ktoś głosował za zamknięciem tego pytania. Chciałbym wiedzieć dlaczego. Uważam, że to pytanie jest bardzo istotne dla Super User (strona internetowa umożliwiająca uzyskanie pomocy w przypadku problemów z komputerem) i nie może być zamknięte.

— ADTC

Głosuję za zamknięciem @ADTC, ponieważ jest to problem bardziej polegający na tym, że khancademy nie prowadzi właściwie badań zgodności swojej witryny, a nie pytania, które można rozwiązać tutaj.

— James Mertz,

To smutne, że po prostu dlatego, że nieświadomie przywiązałem problem do strony internetowej, zamiast od samego początku zajmować się wyłącznie Firefoksem / CSS , teraz nie zyskuje ona na wartości nawet po przeredagowaniu w celu rozwiązania go ze strony internetowej i uczynienia go czysto Firefox / CSS. W każdym razie dodałem na końcu kontrprzykład jako aktualizację, który może pokazywać na czym polega problem.

— ADTC

Jestem rozczarowany arogancją połączoną z brakiem zrozumienia tutaj. Problem polega na tym, że Font Awesome nie powiedzie się w Firefoksie za każdym razem, gdy żądanie pliku czcionki jest między domenami. Innymi słowy, w dowolnej witrynie korzystającej z sieci CDN do dystrybucji plików statycznych.

— jasonrr

„KA odwoływały się do plików czcionek z niewłaściwej lokalizacji” Niepoprawnie! 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. Mylisz się.

— ADTC

Odpowiedzi:

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.

— ADTC
źródło

Ta odpowiedź została utworzona zgodnie z prośbą Sathya w strumieniu komentarzy poniżej pytania.

— ADTC

Pamiętaj, że ten problem z Firefoksem wpływa również na ścieżki zaczynające się od ../.

— Ben

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ę.

— Pim Schaaf
źródło

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 }

— Herson Tamin
źródło