代码之家 › 专栏 › 技术社区 › magenta placenta

将css变量合并为一个变量

css-variables webfonts css

magenta placenta · 技术社区 · 8 月前

我试图将多个css变量组合成一个我可以使用的变量,但似乎行不通。特别是,我试图将单独的字体规则组合成一个,然后我可以使用字体简写。

以下是我在根上的变量声明的相关部分:

:root {
    --Font-Family-Regular: 'my-custom-web-font', verdana, sans-serif;
    --Font-Family-Regular-Weight: 400;
    --Font-Family-Regular-Style: normal;

    --Body-Font:
        var(--Font-Family-Regular-Style)
        var(--Font-Family-Regular-Weight)
        var(--Font-Family-Regular);
    }
}

然后在我的css中,我引用了css变量,在那里我组合了其他变量:

body {
  font: var(--Body-Font);
}

但我没有得到我所期望的网络字体。这样的组合/作曲是不可能的吗?

网络字体加载良好。如果我引用字体族变量 font-family 房地产,一切都很好。我有常规/粗体/半粗体/斜体版本,每个版本都使用单个css变量,我只是想把家族、重量和风格组合成一个变量。

2 回复 | 直到 8 月前

A Haworth 8 月前

对于您必须放置值的顺序,有一些相当严格的规则 font:

并且必须包含字体大小。某些值必须位于字体大小之前。

请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/font 了解详情。

这是一个使用CSS的示例(选择了粗体权重,以便我们可以看到它已被应用)。

<style>
  :root {
    --Font-Family-Regular: 'my-custom-web-font', verdana, sans-serif;
    --Font-Family-Regular-Weight: bold;
    --Font-Family-Regular-Style: normal;

    --Body-Font: var(--Font-Family-Regular-Style) var(--Font-Family-Regular-Weight) 72px var(--Font-Family-Regular);
  }


  body {
    font: var(--Body-Font);
  }
</style>

<body>some text</body>