Internet Explorer 8 ignoriert Font-Gewicht in CSS

Question

So habe ich Probleme zu verstehen, warum IE mein CSS hier ignoriert. Ich habe diesen Code:

<h2>Har du stadsnät eller kan du få det?</h2> 

I.e. nichts Seltsames oder so. Und hier ist die resultierende Rendering:

Aber hier ist der CSS-Code für diese HTML:

.rubrik, h2 { 
    font-family: Lato; 
    font-size: 32px; 
    font-weight: normal; 
    line-height: 38px; 
    font-variant: normal; 
    font-style: normal; 
    color: #969696; 
} 

dem eindeutig hervorgeht, dass die H2 sollte "normal" als Schriftstärke haben, noch die gerenderte Text eindeutig fett ist, ist hier eine korrekte Wiedergabe (von Safari)

Also, mit den mitgelieferten Entwickler-Tool von Internet Explorer 8, überprüfe ich die CSS-Interpretation, und das wie folgt aussieht:

Wie ich es verstehe, was ich hier bin auf der Suche ist Interpretation des IE8 meines CSS und verdächtig fehlt das Attribut "normal". IE hat das CSS in die einzeilige Version von "font" konvertiert, aber nicht den "normalen" Teil. Nun wird die Schriftart "Lato" ist ein font-face Schriftart und das font-face CSS ist hier:

@font-face { 
    font-family: Lato; 
    src: url('/media/fonts/Lato.eot'); 
    src: local('nofont'), url('/media/fonts/Lato.ttf') format('truetype'); 
} 
@font-face { 
    font-family: Lato; 
    src: url('/media/fonts/Lato-Bold.eot'); 
    src: local('nofont'), url('/media/fonts/Lato-Bold.ttf') format('truetype'); 
    font-weight: bold; 
} 
@font-face { 
    font-family: Lato; 
    src: url('/media/fonts/Lato-Bold-Italic.eot'); 
    src: local('nofont'), url('/media/fonts/Lato-Bold-Italic.ttf') format('truetype'); 
    font-weight: bold; 
    font-style: italic; 
} 
@font-face { 
    font-family: Lato; 
    src: url('/media/fonts/Lato-Italic.eot'); 
    src: local('nofont'), url('/media/fonts/Lato-Italic.ttf') format('truetype'); 
    font-style: italic; 
} 

Auch wenn "normal" in der font-face-Deklaration für font-weight Angabe, es doesn‘ t arbeiten. Also stecke ich hier fest und versuche herauszufinden, was ich falsch mache, um IE nicht "font-weight: normal" in die Deklaration für H2 einzuschließen ... Irgendwelche Vermutungen? Vielen Dank im Voraus ...

Answer 1

Dies kann ein Vererbungsproblem sein. Haben Sie versucht, das Schlüsselwort!

font-weight: normal !important; 

Answer 2

Ich glaube, Sie müssen die Namen der font-family: Lato; auf jeder Eigenschaft fontface ändern, wie IE möglicherweise ist verwirrt. Versuchen Sie stattdessen, font-family: Lato-bold;, font-family: Lato-italic usw. zu setzen. Wenn die Schriftart ein fettes Gesicht hat (wie Lato und Sie in den fontface Eigenschaften verwiesen haben), müssen Sie nicht font-weight: bold; für eine fontface Eigenschaft hinzufügen, da die Schriftart bereits fett ist Hinzufügen der Schrift-Gewicht wird nur faux-fett hinzufügen und es schlecht aussehen.

Dies bedeutet, dass Sie für Ihre h2 nur font-family: Lato; setzen müssen, wenn Sie möchten, dass es die normale, nicht-fett Version ist.