Uso @fontface Carica tipi di carattere corsivo

Question

ho CSS in questo modo:

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

e una regola per la mia classe in questo modo:

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

E infine HTML:

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

Ora , Ho letto here on metaltoad e altri posti su SO che usare un'unica famiglia di font è il modo migliore per utilizzare caratteri personalizzati e che devi mettere in grassetto il corsivo.

Il problema è che il carattere viene visualizzato ital. Utilizzando font-weight:normal nella classe css, ottengo il peso di visualizzazione normale, ma font-style:normal non cancella il corsivo. Questo ha senso, poiché sotto (-webkit) "strumenti di sviluppo" nella scheda "risorse", vedo solo il carattere black-italic caricato (secondo nel mio file CSS). Il font è installato sul mio computer, ma ho rinominato il file sul server.

Ho osservato questo in opera (webkit) e IE11, quindi è il mio codice.

Modifica: come accennato nei commenti, avevo il grassetto e il nero invertito. Ciò spiega l'audace. Ma il corsivo è ancora un problema.

Answer 1

Come David Stone's answer nella risposta autorevole allo @fontface stati domande, this spec dice che oblique, italic è valido.

Come ha affermato, a FF 3.6 non piacciono i due valori. Sepolto nel comments ci sono più rapporti di due valori non funzionanti.

Scavando nel webkit bug reports, ho scoperto che il valore per font-style come prescritto dalle specifiche è cambiato da CSS2 a CSS3. In base allo later css3 spec, è consentito un solo valore per la proprietà font-style anziché un elenco separato da virgole.

Quindi, se passate in un elenco separato da virgole, il motore di rendering dice "non è uno stile font valido. Dovevano significare normal". E sovrascrive la tua precedente dichiarazione normale.

tl; dr: se di carattere viso è rendere tutti i font in corsivo:

font-style: italic, oblique; 

dovrebbe essere

font-style: italic;