[英]@font-face with multiple files looks different in Firefox and Chrome
I've css for Custom Arial
font face for regular, bold, italic and bold-italic
style. 我为Custom Arial
字体设置了CSS,以实现regular, bold, italic and bold-italic
样式。
And for that all different font files are created arial_mt_stdregular
, arial_mt_stdbold
, arial_mt_stditalic
and arial_mt_stdbold_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;
}
In Firefox, this apply italic style twice as Chrome and IE. 在Firefox中,斜体样式是Chrome和IE的两倍。
So my content looks twice italic and twice bold in FireFox than Chrome and 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;
}
sample from FF and Chrome FF和Chrome的样本
Why Chrome and IE not applied font-style:italic for "arial_mt_stditalic" font? 为什么Chrome和IE不为“ arial_mt_stditalic”字体应用font-style:italic?
I suspect this is browsers trying to simulate italics when you've provided an italic font but told the browser it isn't italic. 我怀疑这是当您提供斜体字体但告诉浏览器不是斜体时,浏览器试图模拟斜体。
When applying the font you have: 应用字体时,您可以:
font-family: 'arial_mt_stditalic'; font-style: italic;
But in the single @font-face
for rial_mt_stditalic
you have 但是在rial_mt_stditalic
的单个@font-face
,您有
font-style: normal;
Ie. 就是 you have told the browser to use a non-italic typeface as italic. 您已告知浏览器使用非斜体字作为斜体。
All the @font-face
definitions should have the same value for font-family
, and the other properties then tell the browser what variant, weight, etc. that particular download is. 所有@font-face
定义的font-family
应该具有相同的值,然后其他属性告诉浏览器该特定下载内容是什么变体,粗细等。
When you use that font-family the browser matches on the other properties to select the download. 当您使用该字体系列时,浏览器会在其他属性上进行匹配以选择下载。
Ie. 就是 you should have: 你应该有:
#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.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.