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

20

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.

Wie die Symbole in Firefox angezeigt werden

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

Wie die Symbole in anderen Browsern angezeigt werden

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?

ADTC
quelle
2
Es scheint, dass jemand dafür gestimmt hat, diese Frage zu schließen. Ich würde gerne wissen warum. Ich halte diese Frage für sehr relevant für Super User (eine Website, die Hilfe bei Computerproblemen bietet) und darf nicht geschlossen werden.
ADTC
1
Ich stimme dafür, @ADTC zu schließen, weil dies ein Problem ist, bei dem die Khancademy die Kompatibilität ihrer Website nicht richtig untersucht, und keine Frage, die hier gelöst werden kann.
James Mertz
4
Es ist traurig, dass ich das Problem nur deshalb, weil ich es unabsichtlich mit der Website verbunden habe, anstatt es von Anfang an als reines Firefox / CSS-Problem zu betrachten, jetzt auch nach der Neuformulierung nicht mehr das Verdienst habe, es von der Website zu lösen und zu einem reinen Firefox / CSS-Problem zu machen. Wie auch immer, ich habe am Ende ein Gegenbeispiel als Update hinzugefügt, das möglicherweise zeigt, woran es liegt.
ADTC
5
Ich bin enttäuscht von der Arroganz, die hier mit Unverständnis einhergeht. Das Problem ist, dass Font Awesome in Firefox immer dann fehlschlägt, wenn die Anforderung für die Schriftartdatei domänenübergreifend ist. Mit anderen Worten, auf jeder Site, die ein CDN zum Verteilen statischer Dateien verwendet.
Jasonrr
3
"KA hat auf die Schriftdateien am falschen Speicherort verwiesen" 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. Sie liegen falsch.
ADTC

Antworten:

12

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.

ADTC
quelle
Diese Antwort wurde auf Wunsch von Sathya im Kommentar-Stream unterhalb der Frage erstellt.
ADTC
2
Beachten Sie, dass dieses Firefox-Problem auch Pfade betrifft, die mit beginnen ../.
Ben,
0

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 }
Herson Tamin
quelle