Firefox tidak dapat menampilkan ikon dari set Font Keren webfont

Di Firefox (Windows 7), ikon dan mesin terbang yang dipanggil dari paket Font Awesome tidak ditampilkan dengan benar. Contohnya dapat dilihat di situs web Khan Academy. Di bawah video ikon ditampilkan sebagai kotak dengan kode hex di dalamnya. Ini berarti itu tidak diunduh oleh Firefox.

Bagaimana tampilannya di Chrome (Windows 7), Safari (Mac OS X) dan Stainless (Mac OS X):

Saya menemukan pertanyaan ini pada Stack Overflow yang dapat menjelaskan mengapa hal ini terjadi - CSS tidak menggunakan tanda kutip tunggal untuk melampirkan lokasi src font. Namun, saya tidak memiliki akses tulis ke server Khan Academy sehingga saya tidak dapat mengubah situs web yang sebenarnya. Saya ingin tahu apakah ini bisa diperbaiki di Firefox, dan bagaimana caranya. Saya dapat menjalankan skrip Greasemonkey jika itu akan membantu. Saya sudah mencoba mengunduh font secara manual dan menambahkannya ke folder Font Windows tetapi ini tidak membantu.

Sebagai referensi, CSS yang mengatur font ini (tidak diproses dengan benar oleh Firefox) adalah:

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

Pembaruan: Saya menemukan bahwa Firefox menampilkan ikon berbasis font dengan benar di situs web paket Font Awesome (ditautkan di atas). Setelah memeriksa CSS dan membandingkannya dengan Khan Academy CSS, saya menemukan bahwa kedua kode persis sama kecuali tidak ada tanda titik koma setelah atribut terakhir untuk CSS KA (jika Anda mengabaikan fakta bahwa itu dikompresi). Apakah kurangnya titik koma menyebabkan masalah ini?

Masalah yang dijelaskan dalam pertanyaan diperbaiki oleh Khan Academy dengan mengubah semua jalur dari ./menjadi /fonts/(misalnya ./fontawesome-webfont.ttfperubahan ke /fonts/fontawesome-webfont.ttf). Sepertinya saya bahwa Firefox tidak dapat membaca file dari direktori "dot" khusus (yang hanya merujuk ke direktori saat ini).

PS: Kurangnya titik koma di CSS setelah atribut terakhir tidak menyebabkan masalah ini.

Komentar tambahan:

Suntingan Anda tentang .awalan adalah masalah server, bukan bagaimana Firefox menangani file. KA mereferensikan file font dari lokasi yang salah - acak

Salah! Font berfungsi dengan benar di tiga browser lain seperti yang telah saya sebutkan sebelumnya, yang berarti font berada di lokasi yang benar. Itu jelas masalah Firefox dengan ./path seperti yang saya jelaskan, yang memaksa KA untuk memindahkan file font ke lokasi baru yang tidak perlu ./, memungkinkan Firefox juga membaca file font dengan benar. Karenanya ini adalah masalah bagaimana Firefox menangani file.

Mungkin tidak yang jawaban atas pertanyaan yang diajukan, tapi cukup terkait dengan bantuan orang yang berakhir di sini dengan masalah yang sedikit berbeda yang menghasilkan hasil yang sama seperti yang ditunjukkan pada screenshot.

Firefox memblokir penggunaan font yang ada di domain (sub-) yang berbeda

Baca juga komentar pada posting itu, mereka memberikan saran yang baik.

Saya melakukan perubahan jalur untuk menjalankan IE, Firefox dan Chrome dengan benar, sebagai berikut: ( URL untuk melihat )

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