使用@fontface字体加载斜体

Question

我有这样的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:

<li class="font-alegreya" data-styles="bold, italic, extrabold">
    Alegreya - Some sample words.
</li>

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

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

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

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

Answer 1

正如David Stone对问题权威答案的回答所述@fontface, 该规范称oblique, italicIS有效.

正如他所说,FF 3.6不喜欢这两个值.在评论中埋葬了更多关于两个价值观无效的报道.

在深入研究webkit错误报告时,我发现font-style规范规定的值从CSS2变为CSS3.根据后来的css3规范,font-style属性只允许一个值,而不是以逗号分隔的列表.

所以现在,如果你传入一个以逗号分隔的列表,渲染引擎会说"这不是一个有效的字体样式.它们必须具有意义normal." 并覆盖您之前的正常声明.

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

font-style: italic, oblique;

应该

font-style: italic;