CSS中calc()与var()使用异常：元素渲染字体大小不一致

我原本想让两个<h1>标签的字体大小完全一致，但第一份代码没达到预期，第二份代码能正常工作，但我没搞懂背后的原理。

不生效的代码 #

:root {
  --default-size: calc(1rem + 0.5vw);
  font-size: var(--default-size);
}

.font-size\:default {
  font-size: var(--default-size) !important;
}

<h1>DIMENSION</h1>
<h1 class="font-size:default">DIMENSION</h1>

生效的代码 #

:root {
  --default-size: calc(1rem + 0.5vw);
}

* {
  font-size: var(--default-size);
}

.font-size\:default {
  font-size: var(--default-size) !important;
}

<h1>DIMENSION</h1>
<h1 class="font-size:default">DIMENSION</h1>

原因分析 #

核心问题出在CSS自定义属性（变量）的求值时机和rem单位的计算基准上：

• CSS变量本质是存储「未计算的表达式字符串」，只有当它被应用到具体元素的属性上时，才会在该元素的上下文里完成计算。
• rem单位的计算基准是根元素（:root/html）的font-size，这个基准值会直接影响所有rem相关的计算结果。

第一份代码失效的细节 #

1. 当:root设置font-size: var(--default-size)时，变量开始计算：此时根元素的font-size还是浏览器默认值（通常是16px），所以1rem=16px，最终根元素的font-size被设为16px + 0.5vw。
2. 当第二个<h1>应用.font-size:default类时，变量再次计算：此时根元素的font-size已经变成了16px + 0.5vw，这里的1rem就等于这个新值，最终算出的字体大小是(16px + 0.5vw) + 0.5vw = 16px + 1vw。
3. 第一个<h1>继承的是根元素的16px + 0.5vw，自然和第二个<h1>的大小不一样。

第二份代码生效的细节 #

1. 这里没有修改根元素的font-size，所以rem的计算基准始终是浏览器默认的16px。
2. 不管是*选择器还是.font-size:default类，计算var(--default-size)时，1rem都是16px，最终字体大小都是16px + 0.5vw，两个<h1>自然完全一致。

内容的提问来源于stack exchange，提问作者igol