使用@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上的地方，使用单个字体族是利用自定义字体的首选方式，并且您必须将粗体-斜体放在最后。 问题是字体以斜体显示。通过在CSS类中使用font-weight:normal，我获得正常的显示重量，但font-style:normal不能清除斜体。这是有道理的，因为在“开发人员工具”中，我只看到加载了黑色斜体字体（在我的CSS文件中排名第二）。该字体已安装在我的计算机上，但我在服务器上重命名了该文件。

我在Opera（WebKit）和IE11中观察到了这一点，所以这是我的代码。

编辑：如评论中所述，我颠倒了粗体和黑体。这解释了粗体。但是斜体仍然存在问题。

- Josiah

---

仅供参考，这个类似的问题似乎也需要一个答案。 - Josiah

在@Josiah提到的帖子中有一条评论可能会对您有所帮助：http://stackoverflow.com/questions/10609002/defining-css-font-face-bold-italic#comment13766538_10615516 - ala_747

谢谢@ala_747 - 但这不是我已经有的吗？普通->斜体->粗体->粗斜体？这就是为什么我按照这个顺序进行的。 - Josiah

我不认为“黑色”是指“普通”...也许你可以尝试更改文件名。 - ala_747

是的，没错，我已经做了那个更改，但问题仍然存在——它没有任何理由地加载斜体字体。不过我会编辑代码的。 - Josiah

我已经找到了解决方案。我很快会发布它。 - Josiah

Answer 1

正如大卫·斯通的答案中所述，关于@fontface的问题，这个规范指出oblique, italic是有效的。

正如他所说，FF 3.6不喜欢这两个值。在评论中，还有更多的关于不起作用的两个值的报告。

在研究webkit bug reports时，我发现CSS规范中font-style的值从CSS2到CSS3有所改变。根据后来的css3规范，font-style属性只允许一个值，而不是逗号分隔的列表。

因此，现在如果传入逗号分隔的列表，渲染引擎会说“这不是一个有效的字体样式。他们一定是想说normal。”并覆盖您之前的正常声明。

简而言之：如果字体呈现所有斜体字，请检查是否正确设置了font-style属性。

font-style: italic, oblique;

应该是

font-style: italic;

- Josiah