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，则可能必须使用 Javascript 提取字体系列并有条件地设置样式。