基于字体系列的 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。

因此，在浏览器编译和评估 CSS 样式之前，请确定 在哪里处理 CSS 样式。如果您使用没有预处理器的纯 CSS，您可能必须使用 Javascript 提取字体系列并有条件地设置样式。