帶有多個文件的@ 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.