@ Font-face innerhalb @media verschachtelt funktioniert nicht in Firefox 3.5 und IE8

Question

Aktualisieren : Sieht aus wie habe ich mich in einer Beziehung gefangen, die in der Tat nicht die Ursache des Problems war. Problem war eigentlich ein nicht verwandtes Problem, wie CSS-Dateien bereitgestellt wurden. Siehe meine Antwort unten.

Ich habe @ font-face gut arbeitet in WebKit (Safari und Chrome) und Opera, aber nicht in Firefox 3.5 oder IE 8.

Per Empfehlungen durch Google und andere, ich dienen alle statischen Vermögenswerte, einschließlich CSS, von einer separaten Domäne von meinem Haupt-Website. Wenn ich alles aus der gleichen Domäne dienen, es funktioniert gut in allen Browsern . (Anmerkung: Dies bedeutet, dass Ihre Antworten über CSS-Syntax sind nutzlos Ich habe bereits all das herausgefunden und große Arbeits Dies ist nur. über die Cross-Domain-Ausgaben).

Wenn ich diene CSS und Schriftart-Dateien von meiner statischen Vermögenswerte Domäne und habe die statischen Vermögenswerte Server die entsprechenden gesetzt Zugangskontrollkopf (Access-Control-Allow-Origin), die em <> sollte Arbeit, es überall, außer FF 3.5 und IE funktioniert.

Was muss ich tun, um diese Arbeit zu machen?

Answer 1

Die beste Antwort, die ich bisher entdeckt habe, in der Hoffnung, dass es hilft jemand anderes:

Soweit ich sagen kann, ist die entscheidende Frage ist, ob die CSS-Datei (nicht die Font-Datei) geladen Cross-Domain. Wenn ich die CSS-Datei mit den @ font-face Erklärungen von meiner statischen Vermögen Domäne laden, nichts, was ich tun wird die Schriftarten Arbeit in FF oder IE machen, unabhängig von den Zugriffssteuerheader. Wenn ich die CSS-Datei aus der gleichen Domäne wie die Seite laden, oder ich gerade meine @ font-face Erklärungen in einen Style-Block in dem Seitenkopf bewegen, dann funktioniert es in allen Browsern (I sogar die Schriftart-Dateien laden kann Cross-Domain solange ich den Zugriffssteuerungs-Header gesetzt haben).

Fassen wir zusammen:. AFAICT, FF 3.5 und IE 8 wird zu Ehre verweigern @ font-face Erklärungen in einer Cross-Domain-loaded CSS-Datei, egal, was

Ich würde gerne auf diese korrigiert werden, wenn jemand besser weiß und kann darauf hinweisen, was sonst könnte ich falsch machen.

Ja, ich war falsch. Es stellt sich heraus der CSS-Kompressor wir für die Bereitstellung von Vermögenswerten wurden unter Verwendung von der dedizierten Domäne des gesamte Stück CSS bedient werden mit „@ media-Bildschirm {...}“ wickelt. Ich sorgfältig die @ font-face-Regeln im Vergleich zu sein, dass der Kompressor nicht mit ihnen Chaos tat, aber nie geprüft ganz am Anfang und am Ende der CSS-Datei, die Verpackung zu fangen. Als ich in den Dienst am selben Domain geschaltet wird, hat die Verpackung nicht passieren.

Wie sich herausstellt, IE und Firefox nicht Ehre @ font-face Erklärungen innerhalb @media eingewickelt. Safari, Chrome und Opera tun

Sigh.

Answer 2

Ich würde unter Interesse bekundet in dieser Vorgehensweise.

Answer 3

Dieser Link hat mir sehr geholfen: http: // Snook. ca / Archiv / html_and_css / werden-a-font-Einbettungs Master

Leider war ich sehr mit der Qualität des Textes enttäuscht von den meisten der Schriften Ich wollte versuchen. Ich konnte nicht entscheiden, ob einige Schriften nicht anti-aliasable waren oder nicht, aber die Ergebnisse waren nicht befriedigend und ich Standbild Ersatz verwenden.