基于字体家族的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时，它会从屏幕顶部更改其大小和对齐方式...

top更改时如何设置font-size和font-family进行更改？

Answer 1

CSS仅与您的内容样式有关。您可能具有取决于内容的字体，因此一种解决方案是修改HTML，因为HTML用于定义页面的实际内容。我认为这可能与调查的客户端浏览器兼容性有关。

在确定后备字体系列时，内容已经加载。因此，您需要使用Javascript。

因此确定

where CSS样式的处理将在您的浏览器进行编译和评估之前进行。如果您使用不带预处理器的纯CSS，则可能必须使用Javascript提取字体系列并有条件地设置样式。