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

Question

我为Custom Arial字体设置了CSS，以实现regular, bold, italic and bold-italic样式。

为此，将创建所有不同的字体文件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的两倍。

因此，与Chrome和IE相比，我的内容在FireFox中看起来是斜体和粗体。

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

FF和Chrome的样本

为什么Chrome和IE不为“ arial_mt_stditalic”字体应用font-style：italic？

Answer 1

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

应用字体时，您可以：

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

但是在rial_mt_stditalic的单个@font-face ，您有

 font-style: normal; 

就是 您已告知浏览器使用非斜体字作为斜体。

所有@font-face定义的font-family应该具有相同的值，然后其他属性告诉浏览器该特定下载内容是什么变体，粗细等。

当您使用该字体系列时，浏览器会在其他属性上进行匹配以选择下载。

就是 你应该有：

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