使用@fontface 字体加载斜体

Posted 2023-03-06

【中文标题】使用@fontface 字体加载斜体

【英文标题】：Using @fontface fonts load italic

【发布时间】：2015-04-18 15:23:22

【问题描述】：

我有这样的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）“开发者工具”下，我只看到加载了black-italic 字体（在我的CSS 文件中是第二个）。字体已安装在我的计算机上，但我在服务器上重命名了文件。

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

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

【问题讨论】：

仅供参考，this similar question 似乎也需要答案。

在@Josiah 引用的帖子中，有一条评论可能对您有所帮助：***.com/questions/10609002/…

感谢@ala_747——但这不是我所拥有的吗？正常 -> 斜体 -> 粗体 -> 粗体斜体？这就是为什么我按这个顺序做的。

我不认为“黑色”意味着“正常”...也许您可以尝试更改文件名。

我确实找到了解决方案。我会尽快发布。

【参考方案1】：

正如David Stone's answer 对@fontface 问题的权威回答所述，this spec 表示oblique, italic 是有效的。

正如他所说，FF 3.6 不喜欢这两个值。埋在comments 中有更多关于二值无效的报告。

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

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

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

font-style: italic, oblique;

应该是

font-style: italic;