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

Question

我 css Custom Arial 字体 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 的两倍。

所以我的内容在 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 没有为 "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 相同的值，然后其他属性会告诉浏览器该特定下载是什么变体、权重等。

当您使用该字体系列时，浏览器会根据其他属性匹配 select 下载。

即。你应该有：

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

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

@font-face with multiple files looks different in Firefox and Chrome

html

css

fonts

font-face

webfonts