Firefox, Font Awesome web yazı tipi kümesinden simgeler oluşturamaz

Firefox'ta (Windows 7), Font Awesome paketinden çağrılan simgeler ve glifler düzgün görüntülenmez. Bunun bir örneği Khan Academy web sitesinde görülebilir. Videonun altında simgeler içinde onaltılı kod bulunan kutular olarak gösterilir. Bu, Firefox tarafından indirilmediği anlamına gelir.

Chrome (Windows 7), Safari (Mac OS X) ve Paslanmaz (Mac OS X) üzerinde nasıl görünür:

Bu sorunun nedenini açıklayabilecek yığın taşması üzerinde buldum - CSS yazı tipinin src konumunu içine almak için tek tırnak kullanır. Ancak, Khan Academy sunucularına yazma erişimim yok, bu yüzden gerçek web sitesini değiştiremiyorum. Bunun Firefox'ta düzeltilip düzeltilemeyeceğini ve nasıl yapılacağını bilmek istiyorum. Bu yardımcı olursa Greasemonkey komut dosyalarını çalıştırabilirim. Yazı tipini manuel olarak indirmeyi ve Windows 'Fonts klasörüne eklemeyi denedim, ancak bu yardımcı olmuyor.

Başvuru için, bu yazı tipini ayarlayan CSS (Firefox tarafından düzgün işlenmemiş):

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

Güncelleme: Firefox'un Font Awesome paketinin web sitesinde (yukarıda bağlantılı) yazı tipi tabanlı simgeleri doğru bir şekilde gösterdiğini buldum. CSS'nin incelenmesi ve Khan Academy'nin CSS'si ile karşılaştırılması üzerine, KA'nın CSS'sinin son özelliğinden sonra noktalı virgül olmaması dışında (sıkıştırılmış gerçeğini yoksayarsanız) her iki kodun da tamamen aynı olduğunu görüyorum . Noktalı virgül eksikliği bu soruna neden oluyor mu?

Soruda açıklanan sorun, Khan Academy tarafından tüm yollar ./yerine /fonts/(örneğin ./fontawesome-webfont.ttfdeğişiklikler /fonts/fontawesome-webfont.ttf) değiştirilerek giderildi . Bana öyle geliyor ki Firefox, özel "nokta" dizininden (sadece geçerli dizini ifade ediyor) dosyaları okuyamıyor.

Not: Geçen niteliğinden sonra CSS'deki noktalı virgül eksikliği değil bu soruna neden.

Ek Yorumlar:

Ön .ek hakkındaki düzenlemeniz , Firefox'un dosyaları nasıl ele aldığı değil, bir sunucu sorunudur. KA, font dosyalarına yanlış konumdan referans veriyordu - rastgele

Yanlış! Daha önce de bahsettiğim gibi, yazı tipleri diğer üç tarayıcıda düzgün çalıştı, bu da yazı tiplerinin doğru konumda olduğu anlamına geliyor. Açıkladığım gibi Firefox'un ./yoldaki problemi açıkça ortaya çıktı , bu da KA'nın yazı tipi dosyalarını ihtiyaç duymayan yeni bir konuma taşımasına zorladı ve ./Firefox'un yazı tipi dosyalarını da doğru bir şekilde okumasına izin verdi. Bu nedenle , Firefox'un dosyaları nasıl ele aldığı ile ilgili bir konudur.

Muhtemelen hayır yöneltilen sorunun cevabı, ancak ekran görüntülerinde aynı sonucu üretir biraz farklı problemle burada sona yardım insanlara ilgili yeterli.

Farklı (alt) bir etki alanında bulunan yazı tipinin kullanımını engelleyen Firefox

Ayrıca bu yazıların yorumlarını okuyun, iyi tavsiyelerde bulunurlar.

IE, Firefox ve Chrome'u doğru şekilde çalıştırmak için yol değişikliklerini yaptım: ( Görülecek 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 }