使用@fontface字体加载斜体 [英] Using @fontface fonts load italic

问题描述

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

这是我班上的一条规则:

And a rule for my class like this:

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

最后是HTML:

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

现在，我已阅读

Now, I've read here on metaltoad and other places on SO that using a single font-family is the preferred way to utilize custom fonts and that you have to put bold-italic last.

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

The Problem is that the font is displayed italic. By using font-weight:normal in the css class, I get normal display weight, but font-style:normal doesn't clear the italics. This makes sense, since under (-webkit) "developer tools" in the "resources" tab, I only see the black-italic font loaded (second in my CSS file). The font is installed on my computer, but I renamed the file on the server.

我已经在Opera(webkit)和IE11中观察到了这一点，所以这是我的代码.

I've observed this in opera (webkit) and IE11, so it's my code.

如评论中所述，我将粗体和黑色倒置.那就是大胆的原因.但是，斜体仍然是一个问题.

As mentioned in the comments, I had bold and black inverted. That accounts for the bold. But italic is still an issue.

推荐答案

关于 David Stone的答案 @fontface 问题指出，此规范表示倾斜，斜体是有效的.

As David Stone's answer on the authoritative answer to @fontface questions states, this spec says that oblique, italic IS valid.

正如他所说，FF 3.6不喜欢这两个值.埋入了评论有更多关于二值不起作用的报告.

As he stated, FF 3.6 doesn't like the two values. Buried in the comments there are more reports of two-values not working.

在深入研究 webkit错误报告时，我发现规范规定的 font-style 的值从CSS2更改为CSS3.根据后来css3 spec 中， font-style 属性仅允许使用一个值，而不是逗号分隔的列表.

On digging into the 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, only one value is allowed for the font-style property, rather than a comma-separated list.

因此，如今，如果您输入以逗号分隔的列表，则呈现引擎会说这不是有效的字体样式.它们必须表示 normal ".并会覆盖您之前的常规声明.

So nowdays, if you pass in a comma-separated list, the rendering engine says "that's not a valid font-style. They must have meant normal." And overrides your previous normal declaration.

tl; dr:如果字体是呈现所有斜体字体:

font-style: italic, oblique;

应该是

font-style: italic;

这篇关于使用@fontface字体加载斜体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！