Firefox kann keine Symbole aus dem Webfont-Set "Font Awesome" rendern

In Firefox (Windows 7) werden Symbole und Glyphen, die aus dem Font Awesome- Paket aufgerufen werden, nicht richtig gerendert. Ein Beispiel dafür finden Sie auf der Website der Khan Academy. Unterhalb des Videos werden die Symbole als Kästchen mit Hex-Codes angezeigt. Dies bedeutet, dass es nicht von Firefox heruntergeladen wird.

So sieht es auf Chrome (Windows 7), Safari (Mac OS X) und Stainless (Mac OS X) aus:

Ich habe diese Frage bei Stack Overflow gefunden , die möglicherweise erklärt, warum dies passiert - das CSS verwendet einfache Anführungszeichen, um den Quellspeicherort der Schriftart einzuschließen. Ich habe jedoch keinen Schreibzugriff auf die Khan Academy-Server, sodass ich die eigentliche Website nicht ändern kann. Ich möchte wissen, ob und wie dies in Firefox behoben werden kann. Ich kann Greasemonkey-Skripte ausführen, wenn das helfen würde. Ich habe bereits versucht, die Schriftart manuell herunterzuladen und in den Windows-Ordner "Schriftarten" einzufügen, dies hilft jedoch nicht.

Das CSS, mit dem diese Schriftart eingerichtet wird (von Firefox nicht ordnungsgemäß verarbeitet), lautet:

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

Update: Ich habe festgestellt, dass Firefox die schriftbasierten Symbole auf der Website des Font Awesome-Pakets (oben verlinkt) korrekt anzeigt. Bei der Überprüfung von CSS und dem Vergleich mit dem CSS von Khan Academy stelle ich fest, dass beide Codes exakt gleich sind, außer dass nach dem letzten Attribut für das CSS von KA kein Semikolon steht (wenn Sie die Tatsache ignorieren, dass es komprimiert ist). Verursacht das Fehlen von Semikolon dieses Problem?

Das in der Frage beschriebene Problem wurde von der Khan Academy behoben, indem alle Pfade von ./nach /fonts/(z. B. ./fontawesome-webfont.ttfnach /fonts/fontawesome-webfont.ttf) geändert wurden . Es scheint mir, dass Firefox keine Dateien aus dem speziellen "Punkt" -Verzeichnis lesen kann (das sich einfach auf das aktuelle Verzeichnis bezieht).

PS: Der Mangel an Semikolon in der CSS nach dem letzten Attribute nicht dieses Problem verursachen.

Zusätzliche Kommentare:

Ihre Bearbeitung des .Präfixes ist ein Serverproblem, nicht der Umgang mit Dateien in Firefox. KA verwies auf die Schriftdateien am falschen Ort - zufällig

Falsch! Die Schriftarten funktionierten in drei anderen Browsern korrekt, wie ich bereits vor langer Zeit erwähnt hatte, was bedeutet, dass sich die Schriftarten an der richtigen Stelle befanden. Es war eindeutig das Problem von Firefox mit dem ./Pfad, das KA gezwungen hat, die Schriftdateien an einen neuen Ort zu verschieben, der nicht benötigt wird ./, sodass Firefox auch die Schriftdateien korrekt lesen kann. Deshalb ist es ist eine Frage, wie Firefox behandelt Dateien.

Wahrscheinlich nicht die Antwort auf die gestellte Frage, aber genug, um den Leuten zu helfen, die hier ein etwas anderes Problem haben und dasselbe Ergebnis wie in den Screenshots erzielen.

Firefox blockiert die Verwendung einer Schriftart, die sich in einer anderen (Sub-) Domain befindet

Lesen Sie auch die Kommentare zu diesen Beiträgen, sie geben gute Ratschläge.

Ich habe die Pfadänderungen vorgenommen, um IE, Firefox und Chrome wie folgt korrekt auszuführen: ( URL zu sehen )

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