默認情況下錯誤地使用了最後的字體重量

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值中使用它們會使聲明在語法上無效。