我有这样的css：

@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中观察到了这一点,所以这是我的代码.

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

正如 David Stone’s answer对@fontface问题的权威答案所述,this spec说倾斜,斜体是有效的.

正如他所说,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;