Mit @fontface Schriften laden kursiv

Question

Ich habe wie so CSS:

@font-face { 
    font-family: 'alegreya'; 
    src:url('fonts/AlegreyaBold.ttf'); 
    font-weight:normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'alegreya'; 
    src:url('fonts/AlegreyaBoldItalic.ttf'); 
    font-weight:normal; 
    font-style: italic, oblique; 
} 
@font-face { 
    font-family: 'alegreya'; 
    src:url('fonts/AlegreyaBlack.ttf'); 
    font-weight:bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'alegreya'; 
    src:url('fonts/AlegreyaBlackItalic.ttf'); 
    font-weight:bold; 
    font-style: italic, oblique; 
} 

und eine Regel für meine Klasse wie folgt:

.font-alegreya { 
    font-family:alegreya; 
} 

Und schließlich HTML:

<li class="font-alegreya" data-styles="bold, italic, extrabold"> 
    Alegreya - Some sample words. 
</li> 

Jetzt Ich habe gelesen here on metaltoad und andere Stellen auf SO, dass die Verwendung einer einzigen Schriftfamilie die bevorzugte Möglichkeit ist, benutzerdefinierte Schriftarten und das y zu verwenden Sie müssen zuletzt fett-kursiv setzen.

Das Problem ist, dass die Schriftart angezeigt wird italic. Durch die Verwendung von font-weight:normal in der CSS-Klasse, bekomme ich normales Display-Gewicht, aber font-style:normal nicht die Kursivschrift. Das ist sinnvoll, da ich unter (-webkit) "developer tools" auf der Registerkarte "resources" nur die geladene Schriftart black-italic (zweite in meiner CSS-Datei) sehe. Die Schriftart ist auf meinem Computer installiert, aber ich habe die Datei auf dem Server umbenannt.

Ich habe dies in der Oper (Webkit) und IE11 beobachtet, also ist es mein Code.

Edit: Wie in den Kommentaren erwähnt, hatte ich fett und schwarz invertiert. Das erklärt das Fett. Aber Kursiv ist immer noch ein Problem.

Answer 1

Wie David Stone's answer auf der autoritative Antwort auf @fontface Fragen besagt, sagt this spec dass oblique, italic gültig ist.

Wie er sagte, FF 3,6 mag die beiden Werte nicht. Begraben in der comments gibt es mehr Berichte von Zwei-Werte nicht funktioniert.

Beim Graben in die webkit bug reports, entdeckte ich, dass der Wert für font-style wie von der Spezifikation vorgeschrieben von CSS2 zu CSS3 geändert. Laut later css3 spec ist nur ein Wert für die font-style-Eigenschaft statt einer durch Kommas getrennten Liste zulässig.

Jetzt, wenn Sie in einer durch Kommas getrennten Liste übergeben, sagt die Rendering-Engine "das ist keine gültige Schriftart-Stil. Sie müssen normal gemeint haben." Und überschreibt Ihre vorherige normale Deklaration.

tl; dr: Wenn Schriftart ist, alle kursiv Rendering:

font-style: italic, oblique; 

sollte

font-style: italic;