如何使相对font-size不继承html字号，基于父级16px计算？

场景与问题 #

当前CSS设置：

• 根元素（html）通过自定义变量--fs-base设置字号为13px
• 父级.parent元素字号设为16px
• 子级.child使用1rem作为字号，期望继承父级的16px，实际却为13px
• .child内的p标签使用0.75rem，期望12px，实际为9.75px

核心原因：rem单位始终相对于根元素（html）的字号，和父级元素的字号无关，所以直接用rem无法实现基于父级的相对计算。

解决方案 #

方案1：使用em单位

em单位的计算基于直接父元素的字号，正好符合需求：

html {
  --fs-base: 13px;
  font-size: var(--fs-base);
}

.parent {
  font-size: 16px;
}

.child {
  font-size: 1em; /* 基于.parent的16px，最终为16px */
}

p {
  font-size: 0.75em; /* 基于.child的16px，16*0.75=12px */
}

注意：多层嵌套时em会叠加计算，若有更深层级的元素需要注意字号传递。

方案2：利用CSS自定义变量传递父级字号

通过在父级定义变量，子元素直接引用或计算，避免em的嵌套叠加问题：

html {
  --fs-base: 13px;
  font-size: var(--fs-base);
}

.parent {
  --parent-fs: 16px;
  font-size: var(--parent-fs);
}

.child {
  font-size: var(--parent-fs); /* 直接使用父级变量值，结果16px */
}

p {
  font-size: calc(var(--parent-fs) * 0.75); /* 计算后为12px */
}

这种方式更灵活，适合复杂布局中精准控制字号。

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