h2 {
    font-family:"Bell MT",Georgia,serif;
    font-size:31px;
    font-style:oblique;
    font-weight:normal;
    color:#e19614;
}

当我将font-weight设置为粗体或更大时,产生的效果是所需的倾斜字体,但每当我将重量设置为正常(这是所需的设置)时,它会回到真正的斜体字体,在这种情况下(Bell MT)是非常不同的..

有什么建议？

如果您要求使用粗体斜体Bell MT,您就是这样做的. Bell MT字体系列具有普通,粗体和斜体字体,但没有粗体斜体.因此,浏览器必须拒绝执行您的请求,或通过算法倾斜粗体字体或通过算法粗体斜体字体来伪造它.

正如biziclop的答案所示,你可以使用CSS变换做自己的假(虚假)斜体,或者说伪斜面.但是,在浏览器可以使用请求的斜体或斜体的情况下,没有办法强制浏览器使用自己的伪造机制.

更新：@ JonHanna的回答显示,通过在@ font-face规则中指定字体而不指定斜体字体,可以欺骗浏览器使用伪斜体.所以“浏览器可用”是相对的.

附：假斜体/斜斜与斜斜不一样.印刷师可以设计一种倾斜的字体,这不仅仅是一种倾斜的普通字体,而且不是经典的斜体字样.字体是否被分类为斜体或倾斜在很大程度上取决于品味和命名.对于大多数实际用途,CSS关键字斜体和斜体是同义词,因为浏览器在请求倾斜但不存在时使用斜体,反之亦然.只有当字体具有斜体字体和倾斜字体时,它们才会真正不同,这种情况很少见.

我的主要想法是IE在呈现页面之前不会下载每个字体文件.

在我的CSS中,我已经声明了相同字体的不同字体的字体文件 – 从细斜体到超.它们都使用相同的设置声明：

@font-face { /* THIN ITALIC */
    font-family: Unit;
    src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
    src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
    font-weight: 100;
    font-style: italic,oblique;
    font-variant: normal;
}

通过

@font-face { /* ULTRA */
    font-family: Unit;
    src: url("../gfx/fonts/UnitWeb-Ultra.eot");
    src: url("../gfx/fonts/UnitWeb-Ultra.eot?#iefix") format("embedded-opentype"),url("../gfx/fonts/UnitWeb-Ultra.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
}

如您所见,斜体声明为font-style：italic,oblique;,而normal声明为font-style：normal;.

现在,到渲染.

This is how IE 9 renders it

This is how IE 8 renders it every now and then

您需要为每个@ font-face font-family创建一个自定义名称.例如

@font-face { /* THIN ITALIC */
   font-family: UnitItalic;
   src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
   src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
   font-weight: 100;
   font-style: italic,oblique;
   font-variant: normal;
}


@font-face { /* THIN ITALIC */
   font-family: Unitnormal;
   src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
   src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),oblique;
   font-variant: normal;
}

@font-face {
    font-family: 'alegreya';
    src:url('fonts/AlegreyaBold.ttf');
    font-weight:normal;
    font-style: normal;
}
@font-face {
    font-family: 'alegreya';
    src:url('fonts/AlegreyaBoldItalic.ttf');
    font-weight:normal;
    font-style: italic,oblique;
}
@font-face {
    font-family: 'alegreya';
    src:url('fonts/AlegreyaBlack.ttf');
    font-weight:bold;
    font-style: normal;
}
@font-face {
    font-family: 'alegreya';
    src:url('fonts/AlegreyaBlackItalic.ttf');
    font-weight:bold;
    font-style: italic,oblique;
}

我班的规则是这样的：

.font-alegreya {
    font-family:alegreya;
}

最后是HTML：

<lidata-styles="bold,italic,extrabold">
    Alegreya - Some sample words.
</li>

现在,我已经阅读了here on metaltoad以及SO上的其他地方,使用单一字体系列是使用自定义字体的首选方式,并且必须使用粗体斜体.

问题是字体显示为斜体.通过在css类中使用font-weight：normal,我得到正常的显示权重,但font-style：normal不会清除斜体.这是有道理的,因为在“资源”选项卡中的(-webkit)“开发人员工具”下,我只看到加载的黑色斜体字体(我的CSS文件中的第二个).该字体安装在我的计算机上,但我在服务器上重命名了该文件.

我在opera(webkit)和IE11中观察到了这一点,所以这是我的代码.

编辑：正如评论中提到的,我有大胆和黑色倒置.这说明了大胆.但斜体仍是一个问题.

正如他所说,FF 3.6不喜欢这两个值.在comments中埋葬了更多关于两个值不起作用的报告.

在深入研究webkit bug reports时,我发现规范规定的font-style值从CSS2变为CSS3.根据later css3 spec,字体样式属性只允许一个值,而不是逗号分隔列表.

所以现在,如果你传入一个逗号分隔的列表,渲染引擎会说“那不是一个有效的字体样式.它们一定意味着正常.”并覆盖您之前的正常声明.

tl; dr：如果font face渲染所有斜体字体：

font-style: italic,oblique;

应该

font-style: italic;