@font-face wird vom IE7 ignoriert

Question

Ich habe eine @font-face css-Regel erstellt und alle Schriftformate mit Schriftart Eichhörnchen und funktioniert in allen Browsern, die ich bisher getestet habe, aber nicht im IE7. Die Schriftart scheint überhaupt nicht geladen zu werden.

Sie können die Website live sehen unter http://grupogamma.socialsnack.com/

Die @font-face-Regeln sind auf http://grupogamma.socialsnack.com/wp-content/themes/gamma/style.css und Schriftarten sind auf http://grupogamma.socialsnack.com/fonts/

Mein css-Schnipsel, wie von Font Squirrel generiert:

@font-face {
    font-family: 'UniversCondensedLight';
    src: url('/fonts/univers-condensedlight-webfont.eot');
    src: url('/fonts/univers-condensedlight-webfont.eot?#iefix') format('eot'),
         url('/fonts/univers-condensedlight-webfont.woff') format('woff'),
         url('/fonts/univers-condensedlight-webfont.ttf') format('truetype'),
         url('/fonts/univers-condensedlight-webfont.svg#webfonteM3WTEhs') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'UniversCondensed';
    src: url('/fonts/univers-condensed-webfont.eot');
    src: url('/fonts/univers-condensed-webfont.eot?#iefix') format('eot'),
         url('/fonts/univers-condensed-webfont.woff') format('woff'),
         url('/fonts/univers-condensed-webfont.ttf') format('truetype'),
         url('/fonts/univers-condensed-webfont.svg#webfontPDfnu2z9') format('svg');
    font-weight: normal;
    font-style: normal;

}

EDIT:

Mit Hilfe von Wireshark konnte ich überprüfen, ob die Schriftart .eot tatsächlich geladen ist und ein 200 OK zurückgegeben wird. Der Inhaltstyp ist application/vnd.ms-fontobject. Die Schriftart ist also geladen, wird aber nicht verwendet bzw. nicht richtig wiedergegeben.

Answer 1

Es scheint, dass es etwas anderes in meinem css gab, das den IE7 dazu brachte, sich schlecht zu verhalten (Schock!)

Zum Glück konnte das Problem mit Hilfe von magischem Feenstaub (Zoom: 1) gelöst werden.

Answer 2

Dieser Ansatz, den ich gerade gemacht habe, funktioniert mit IE7 und IE8. Und ja.. Schriftart Deklaration für IE7 ist anders, aber einfacher, im Vergleich zu den "mehrere-Browser" Weg der Deklaration es. Hier ist mein Beispiel. Ich habe die Schriftarten in den Ordner "fonts" eingefügt, so dass Sie einige "fonts/.." im Code sehen können.

/* declaration of custom fontfaces */
/* first set of declaration fixes IE < v.9 issue */
@font-face { 
             font-family:"Open Sans Light";
             src:url("fonts/OpenSans-Light.eot?");
           }

/* if your browser is one of the latest ones, then it will recognize the code 
   below and will redeclare the font faces. 
   Since IE 7 and 8 do not recognize these declarations, 
   they will just bypass them. */
@font-face { 
             font-family:"Open Sans Light";
             src:url("fonts/OpenSans-Light.eot?") format("eot"),
                url("fonts/OpenSans-Light.woff") format("woff"),
                url("fonts/OpenSans-Light.ttf") format("truetype"),
                url("fonts/OpenSans-Light.svg#OpenSans-Light") format("svg");
             font-weight:normal;font-style:normal; 
           }

Answer 3

Ich bin mir ziemlich sicher, dass es eine einfache Sache ist: "IE7 macht das nicht", wie die Kinder sagen. Sitepoint's Hinweis auf @font-face zu finden unter http://reference.sitepoint.com/css/at-fontface zeigt an, dass der IE nur bestimmte Schriftformate über @font-face .

Answer 4

Ich fand heraus, dass ich die Dateierweiterung in IIS in den Mime-Typ einfügen musste, wie hier gezeigt http://technet.microsoft.com/en-us/library/bb742440.aspx