为何CSS级联对含自定义属性的font简写无作用？求技术解析

这是因为CSS自定义属性的惰性求值特性在这里的特殊表现，具体原因如下：

• 当你在:root中定义--font-body-medium-1时，它会直接将当前上下文里的--font-weight-500、--font-size-350、--font-line-height-500、--font-family-primary拼接成完整的font属性值。此时--font-family-primary对应的是Roboto系列字体，所以--font-body-medium-1最终的固定值是：500 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif。
• 当你在Web组件的:host中重新定义--font-family-primary时，这个变量只会影响直接引用它的样式，无法回溯触发:root中--font-body-medium-1的重新计算。因为自定义属性的计算是在首次被引用的上下文里完成一次，之后就会以计算后的固定值存在，除非在同一个上下文里重新定义--font-body-medium-1。

两种可行的解决办法 #

方法一：在Web组件内重新生成font简写的自定义变量 #

在Web组件里重新定义--font-body-medium-1，让它使用新的--font-family-primary：

// Web Component
:host {
  --font-family-primary: "Comic Sans MS";
  --font-body-medium-1: var(--font-weight-500) var(--font-size-350)/var(--font-line-height-500) var(--font-family-primary);
  font: var(--font-body-medium-1);
}

方法二：拆分font简写为单个属性设置 #

放弃使用font简写的自定义变量，直接给单个font属性设置自定义变量，这样单个属性的自定义变量可以正常被级联覆盖：

// Global CSS
:root {
  --font-weight-500: 500;
  --font-size-350: 14px;
  --font-line-height-500: 20px;
  --font-family-sans: 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif;
  --font-family-primary: var(--font-family-sans);
}

// Web Component
:host {
  --font-family-primary: "Comic Sans MS";
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-350);
  line-height: var(--font-line-height-500);
  font-family: var(--font-family-primary);
}

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