默认情况下错误地使用了最后的字体 - 面部重量

Question

我将单个字体的多个权重和样式添加到Rails项目中的font-face。我知道订单在这里很重要，即。首先定义正常，然后是粗体，然后是斜体，然后是斜体粗体。

但是，当我尝试定义普通的第一个然后是斜体时，默认情况下我的网站上显示的是斜体版本。

fonts.scss包含：

@font-face {
    font-family: 'Sentinel Book';
    src: font-url('sentinel-book-webfont.eot');
    src: font-url('sentinel-book-webfont.eot?#iefix') format('embedded-opentype'),
         font-url('sentinel-book-webfont.woff2') format('woff2'),
         font-url('sentinel-book-webfont.woff') format('woff'),
         font-url('sentinel-book-webfont.ttf') format('truetype'),
         font-url('sentinel-book-webfont.svg#sentinelbook') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Sentinel Book';
    src: font-url('sentinel-bookital-webfont.eot');
    src: font-url('sentinel-bookital-webfont.eot?#iefix') format('embedded-opentype'),
         font-url('sentinel-bookital-webfont.woff2') format('woff2'),
         font-url('sentinel-bookital-webfont.woff') format('woff'),
         font-url('sentinel-bookital-webfont.ttf') format('truetype'),
         font-url('sentinel-bookital-webfont.svg#sentinelbook_italic') format('svg');
    font-style: italic, oblique;
}

$font-family-serif: 'Sentinel Book', sans-serif;
$font-family-base: $font-family-serif;

请注意，我使用的是Bootstrap + SASS并覆盖了他们的变量，但我看到的默认值仍然是斜体：

如果我重新排列定义样式的顺序（首先是斜体，然后是norma），我的文本显示正常。但是如果我将任何东西用斜体表示（例如使用<em>标签），浏览器会使用自己的斜体而不是使用加载的webfont的斜体版本。

这里的任何提示都将不胜感激！

Answer 1

原因是声明font-style: italic, oblique在语法上格式不正确（请参阅font-style上的CSS 3字体;只允许一个关键字作为值）。将其更改为

font-style: italic;

声明斜体字体的错误会导致所有文本以斜体呈现，这听起来令人惊讶。但原因是CSS错误处理规则会忽略不正确的声明，因此在此@font-face规则中，font-style默认为normal。这意味着它将应用于普通文本;但字体文件包含斜体字体。

当您更改font-face规则的顺序时，引用常规字体的后一规则将用于普通文本。由于没有规则斜体文本，浏览器将使用常规字体呈现斜体文本，对其应用算法slantic（“虚假斜体”，“合成斜体”）（通常;这原则上取决于浏览器）。

关键字italic和oblique在实践中意味着相同的东西，但理论上它们可能有不同的含义。但是在font-style值中使用它们会使声明在语法上无效。