使用CSS变量继承字体族失效问题排查

你遇到的核心问题是对CSS变量中inherit关键字的作用理解有误：当你给.special设置--special-font: inherit时，这里的inherit继承的是父元素中该CSS变量的值，而非父元素的font-family属性值。由于:root已经定义了--special-font: sans-serif，.special作为:root的后代，继承到的变量值还是sans-serif，所以.special .highlight的字体依然是无衬线体，达不到预期效果。

解决方案：复用全局字体变量 #

要避免代码重复，最简洁的方式是把全局字体也定义成CSS变量，后续直接引用这个变量即可，无需重复写具体字体名称：

:root {
  --global-font: serif; /* 全局字体变量 */
  --special-font: sans-serif;
}

html {
  font-family: var(--global-font); /* 引用全局变量 */
}

.highlight {
  font-family: var(--special-font);
}

.special {
  --special-font: var(--global-font); /* 直接复用全局字体变量 */
}

这样修改后，.special下的.highlight会自动使用全局的serif字体，既避免了代码重复，又保留了CSS变量的灵活性。

为什么注释的代码能生效？ #

• 注释的.special { --special-font: serif; }是直接硬编码字体名称，虽然生效但存在重复代码；
• 注释的.special .highlight { font-family: inherit; }是让.highlight直接继承父元素（.special）的font-family，而.special继承了html的serif，所以也能生效，但这种写法跳过了CSS变量的使用，失去了变量带来的灵活性。

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