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

Question

我在Rails项目中将多个字体重量和样式的单个字体添加到字体。我知道这里的顺序很重要，即。先定义法线，然后粗体，然后斜体，然后斜体粗体。

但是，当我尝试定义正常的第一个然后斜体的第二个时，默认显示在我的网站上的是斜体版本。

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; 

请注意，我使用的是引导+ SASS并覆盖它们的变量，但我依然看到默认为斜体：

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

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

Answer 1

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

font-style: italic; 

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

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

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