在Firefox和Chrome中，带有多个文件的@ font-face看起来有所不同

Question

我为Custom Arial样式的regular, bold, italic and bold-italic字体表示了css。

为此创建了所有不同的字体文件arial_mt_stdregular，arial_mt_stdbold，arial_mt_stditalic和arial_mt_stdbold_italic

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

在Firefox中，这适用于Chrome和IE两种斜体样式。

所以我的内容在FireFox中看起来是两次斜体和两次粗体，而不是Chrome和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

为什么Chrome和IE没有采用font-style：italic for＆＃34; arial_mt_stditalic＆＃34;字体？

Answer 1

我怀疑当你提供斜体字体但是告诉浏览器它不是斜体时，这是浏览器试图模拟斜体。

应用您拥有的字体时：

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

但是在@font-face的单rial_mt_stditalic中你有

font-style: normal;

IE中。你告诉浏览器使用非斜体字体作为斜体。

所有@font-face定义都应具有font-family的相同值，然后其他属性会告诉浏览器特定下载的变体，重量等等。

当您使用该font-family时，浏览器会在其他属性上匹配以选择下载。

IE中。你应该：

#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.