CSS級聯優先級混淆

Question

我很困惑爲什麼<h1>的this website有font-family的Helvetica（至少在Chrome中查看時）。

在Google Developer Tools中，它看起來像是從Bootstrap CSS的body規則（請參閱bootstrap.min.css）繼承的字體系列。

不應該names.css文件優先嗎？明確地在h1標記上設置了font-family的Lobster。

Answer 1

這不是一個選擇優先問題：Chrome瀏覽器將不接受inherit屬性font-family作爲後備。刪除它，你會得到你想要的字體。

The standart says是font-family接受字體，或的inherit特殊值的列表，而不是兩者的混合。我相當肯定，如果在列表中找不到字體，它會回退到inherit。

Answer 2

當我打開該網頁時，Chrome會在該行上給我一個黃色感嘆號三角形，所以它不處理該CSS字體規範。

您是否聲明瞭@font-face {}？它看起來像字體安裝不正確，因爲Chrome不知道如何處理它。

---

編輯：

卸下inherit解決了這個問題。