使用@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;
}

我的 class 规则如下：

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

最后 HTML:

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

现在，我已经阅读了 here on metaltoad 和 SO 上的其他地方，使用单一字体系列是使用自定义字体的首选方式，并且您必须将粗斜体放在最后。

问题是字体显示为斜体。通过在 css class 中使用 font-weight:normal，我得到了正常的显示重量，但 font-style:normal 没有清除斜体。这是有道理的，因为在 "resources" 选项卡中的 (-webkit) "developer tools" 下，我只看到加载了 black-italic 字体（我的 CSS 文件中的第二个）。字体安装在我的电脑上，但我在服务器上重命名了文件。

我在 Opera (webkit) 和 IE11 中观察到这个，所以这是我的代码。

编辑：如评论中所述，我将粗体和黑色倒置。这就是大胆的原因。但是斜体仍然是个问题。

Answer 1

正如 David Stone's answer on the authoritative answer to @fontface questions states, this spec 所说 oblique, italic 是有效的。

正如他所说，FF 3.6 不喜欢这两个值。隐藏在 comments 中的是更多有关双值不起作用的报告。

在深入研究 webkit bug reports, I discovered that the value for font-style as prescribed by the spec changed from CSS2 to CSS3. According the later css3 spec 时，font-style 属性只允许使用一个值，而不是逗号分隔的列表。

所以现在，如果你传入一个逗号分隔的列表，渲染引擎会说 "that's not a valid font-style. They must have meant normal." 并覆盖你之前的正常声明。

tl;dr：如果字体显示所有斜体字体：

font-style: italic, oblique;

应该是

font-style: italic;

使用@fontface 字体加载斜体

Using @fontface fonts load italic

css

fonts

font-face