基於字體系列的 CSS 對齊

Question

我已將div的font-family設置為"Vermin Vibes", fantasy, serif; , 這樣如果第一種字體不可用，瀏覽器將自動使用下一種

#myheader {
    position: sticky;
    top: 1rem;

    text-align: center;

    font-family: "Vermin Vibes", fantasy, serif;
    font-size: 6rem;
}

問題是，當字體更改family 時，它會從屏幕頂部更改其大小和對齊方式......

當font-family更改時，如何設置top和font-size來更改？

Answer 1

CSS 只關心內容的樣式。 您可能擁有依賴於內容的字體，因此解決方案是修改您的 HTML，因為 HTML 用於定義頁面的實際內容。 我認為這與為您的客戶端調查的瀏覽器兼容性更相關。

當確定后備字體系列時，內容已經加載。 所以你需要Javascript。

因此，在瀏覽器編譯和評估 CSS 樣式之前，確定處理 CSS 樣式的位置。 如果您使用沒有預處理器的純 CSS，您可能必須使用 Javascript 提取字體系列並有條件地設置樣式。