Internet Explorer 8 ignoruje wagę czcionki w CSS

Question

Mam problemy z rozumieniem, dlaczego IE ignoruje mój CSS tutaj. Mam ten kod:

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

tj. nic dziwnego ani nic. A oto powstały renderowania:

Ale tutaj jest kod CSS dla tej HTML:

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

który wyraźnie stwierdza, że ​​H2 powinien mieć „normalne” jak waga czcionki, jeszcze renderowany tekst jest wyraźnie pogrubione, tutaj jest poprawne renderowanie (od Safari)

Tak, za pomocą dołączonych narzędzi programistycznych Internet Explorer 8, I sprawdzać interpretacji CSS, a wygląda to tak:

Jak rozumiem, czego szukam w tutaj jest interpretacja IE8 za mojego CSS i podejrzanie brakujące to "normalny" atrybut. IE przekonwertował kod CSS na jednoliniową wersję "czcionki", ale nie zawierał części "normalnej". Teraz, czcionka "Lato" to czcionki font-face i CSS font-face jest tutaj:

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

Nawet gdy określenie "normalny" w deklaracji font-face dla font-weight, nie robi” t działa. Tak więc utknąłem tutaj, próbując dowiedzieć się, co robię źle, aby nie mieć IE to "font-weight: normal" w deklaracji dla H2 ... Jakieś domysły? Z góry dziękuję ...

Answer 1

Może to być problem związany z dziedziczeniem. Czy próbowałeś umieścić! Ważne słowo kluczowe.

font-weight: normal !important; 

Answer 2

Myślę, że trzeba zmienić nazwę font-family: Lato; na każdej nieruchomości fontface, jak to jest możliwe uzyskiwanie mylić IE. Zamiast tego spróbuj umieścić font-family: Lato-bold;, font-family: Lato-italic itd. Jeśli czcionka ma pogrubioną twarz (np. Lato i odwołujesz się do właściwości fontface), nie musisz dodawać font-weight: bold; dla właściwości fontface, ponieważ czcionka jest już pogrubiona i dodanie czcionki-czcionki po prostu doda faux-bold i sprawi, że będzie wyglądać źle.

Oznacza to, że dla swojego h2 wystarczy umieścić font-family: Lato;, jeśli chcesz, aby była to normalna, nie pogrubiona wersja.