@ Schriftart-Gesicht mit mehreren Dateien sieht anders in Firefox und Chrome

Question

Ich habe CSS für Custom Arial Schriftart Gesicht für regular, bold, italic and bold-italic Stil.

Und für alles andere Schriftart-Dateien werden arial_mt_stdregular erstellt, arial_mt_stdbold, arial_mt_stditalic und arial_mt_stdbold_italic

#span{ 
    font-family: 'arial_mt_stditalic'; 
    font-style: italic; 
    font-size: 30px; 
} 

In Firefox, diese kursiv doppelt so Chrome und IE anwenden.

So sieht mein Inhalt in FireFox zweimal kursiv und zweimal fett als Chrome und IE.

@font-face { 
    font-family: 'arial_mt_stdregular'; 
    src: url('arialmtstd-webfont.woff2') format('woff2'); 
    font-weight: normal; 
    font-style: normal; 
} 


@font-face { 
    font-family: 'arial_mt_stdbold'; 
    src: url('arialmtstd-bold-webfont.woff2') format('woff2'); 
    font-weight: normal; 
    font-style: normal; 
} 


@font-face { 
    font-family: 'arial_mt_stditalic'; 
    src: url('arialmtstd-italic-webfont.woff2') format('woff2'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'arial_mt_stdbold_italic'; 
    src: url('arialmtstd-bolditalic-webfont.woff2') format('woff2'); 
    font-weight: normal; 
    font-style: normal; 
} 

sample from FF and Chrome

Warum Chrome und IE nicht angewendet font-style: italic für "arial_mt_stditalic" font?

Answer 1

Ich vermute, dass Browser versuchen, kursiv zu simulieren, wenn Sie eine kursive Schriftart bereitgestellt haben, aber dem Browser gesagt haben, dass es nicht kursiv ist.

Wenn die Schriftart anwenden Sie haben:

font-family: 'arial_mt_stditalic'; 
font-style: italic; 

Aber in der einzigen @font-face für rial_mt_stditalic haben Sie

font-style: normal; 

Ie. Sie haben dem Browser befohlen, eine nicht-italische Schriftart als Kursivschrift zu verwenden.

Alle @font-face Definitionen sollten den gleichen Wert für font-family haben, und die anderen Eigenschaften sagen dann dem Browser, welche Variante, Gewicht usw. dieser bestimmte Download ist.

Wenn Sie diese Schriftfamilie verwenden, stimmt der Browser mit den anderen Eigenschaften überein, um den Download auszuwählen.

Ie. Sie sollten:

#span{ 
    font-family: 'arial mt'; 
    font-style: italic; 
    font-size: 30px; 
} 

@font-face { 
    font-family: 'arial mt'; 
    src: url('arialmtstd-webfont.woff2') format('woff2'); 
    font-weight: normal; 
    font-style: normal; 
} 


@font-face { 
    font-family: 'arial mt'; 
    src: url('arialmtstd-bold-webfont.woff2') format('woff2'); 
    font-weight: bold; 
    font-style: normal; 
} 


@font-face { 
    font-family: 'arial mt'; 
    src: url('arialmtstd-italic-webfont.woff2') format('woff2'); 
    font-weight: normal; 
    font-style: italic; 
} 

// etc.