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>

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

问题是字体显示斜体。通过在css类中使用font-weight:normal，我获得了正常的显示权重，但font-style:normal并未清除斜体。这是有道理的，因为在（-webkit）＆＃34;开发人员工具＆＃34;在＆＃34;资源＆＃34;选项卡，我只看到加载black-italic字体（我的CSS文件中的第二个）。该字体安装在我的计算机上，但我在服务器上重命名了该文件。

我已经在opera（webkit）和IE11中观察到了这一点，所以它是我的代码。

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

Answer 1

关于@fontface个问题的权威答案的David Stone's answer，this spec表示oblique, italic有效。

正如他所说，FF 3.6不喜欢这两个值。埋藏在comments中的报告中有两个值不起作用。

在深入研究webkit bug reports时，我发现规范规定的font-style值已从CSS2更改为CSS3。根据{{3}}，font-style属性只允许一个值，而不是以逗号分隔的列表。

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

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

font-style: italic, oblique;

应该是

font-style: italic;

使用@fontface字体加载斜体

1 个答案: