默认情况下错误地使用了最后一个字体粗细

Question

我正在向 Rails 项目中的字体添加单一字体的多种粗细和样式。我知道这里的顺序很重要，即。先定义normal，然后是bold，然后是italic，然后是italic bold.

但是，当我尝试先定义普通然后再定义斜体时，我的网站上默认显示的是斜体版本。

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 并覆盖它们的变量，但我看到的默认值仍然是斜体：

如果我重新排列定义样式的顺序（首先是斜体，然后是标准字体），我的文本就会正常显示。但是，如果我将任何内容设为斜体（例如使用 <em> 标签），浏览器会自行进行斜体化，而不是使用加载的 webfont 的斜体版本。

如有任何提示，我们将不胜感激！

Answer 1

原因是声明 font-style: italic, oblique 在句法上是错误的（参见 CSS 3 Fonts on font-style；只允许一个关键字作为值）。改成

font-style: italic;

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

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

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

默认情况下错误地使用了最后一个字体粗细

Last font-face weight wrongly being used by default

css

ruby-on-rails

twitter-bootstrap

fonts

sass