css变量级联误区

Question

我正在尝试使用字体速记设置 css 变量属性，但有些事情我不太正确。

我的 html 中有 2 个标题，h1 和 h2

<h1>Titre<h1>
<h2>sous titre<h2>

我正在创建基本变量（字体系列、字体粗细和字体大小）以将它们重组为字体样式变量（基本上是字体）

:root{
--font-primary: Arial, sans-serif;
--font-secondary: Times, serif;

--font-weight-bold: bold;
--font-weight-light: light;

--font-size-10: 14px;
--font-size-20: 28px;

--fontstyle-h1: var(--font-weight-bold) var(--font-size-20) var(--font-primary);
--fontstyle-h2: var(--font-weight-light) var(--font-size-10) var(--font-secondary);
}

h1{ font: var(--fontstyle-h1)};
h2{ font: var(--fontstyle-h2)};

但是只有 h1 得到程式化，我的 h2 没有任何反应。 这看起来很简单，它一定是对变量和作用域有什么误解？

感谢您的帮助！

Answer 1

最后两行有不必要的

;

可悲的是，他们破坏了 CSS。

更有趣的是...

light

不是有效的字体粗细值。

这可以正常工作，如下所示，但是如果您将

h2

改回

font-weight-light

，

light

就会失败。

（我已经更改了两种字体，使它们与众不同，这样我们就可以很容易地看到它是否有效。）

:root{
--font-primary: "Courier New", sans-serif;
--font-secondary: "Symbol", sans-serif;

--font-weight-bold: bold;
--font-weight-light: bold;

--font-size-10: 14px;
--font-size-20: 28px;

--fontstyle-h1: var(--font-weight-bold) var(--font-size-20) var(--font-primary);
--fontstyle-h2: var(--font-weight-light) var(--font-size-10) var(--font-secondary);
}

h1 { font: var(--fontstyle-h1)}

h2 { font: var(--fontstyle-h2)}

<h1>Titre<h1>
<h2>sous titre<h2>

可接受的

font-weight

值是

normal  
bold    
bolder  
lighter 
100
200
300
400
500
600
700
800
900 
initial 
inherit