如何使用em准确设置子元素font-size？em计算异常原因及替代方案

核心原因 #

先讲明确规则：em用在font-size属性上时，计算逻辑永远是「em数值 × 直接父元素的已计算font-size值」，这个过程和font-family没有任何关联，MDN给出的公式是完全正确的。
你碰到的异常本质是两个认知误区叠加导致的：

1. 你在DevTools看到父元素计算值为16px，只能说明给#container写的font-size: 18px没有生效——要么是CSS选择器书写错误、样式被更高优先级规则覆盖，要么是在DevTools中点错了要审查的元素节点。id选择器的优先级远高于浏览器默认样式，只要样式正常加载，#container的计算字号必然是18px，此时子元素设置font-size: 1em的计算结果也一定是18px，不会因为切换字体就发生变化。
2. 你感知到的字号不一致大多是视觉误差：不同字体族的字身框设计、字面率差异极大，同样是18px的字号，serif衬线字体和monospace等宽字体的视觉大小可能差出数个像素，但这是字体本身的设计区别，不是CSS单位计算错误，DevTools显示的计算字号不会因为字体切换发生改变。
   问题复现代码如下：

#container {
  font-size: 18px;
  font-family: serif;
}

#child {
  font-family: monospace;
  font-size: 1em;
}

<p id="container">
  Container text
  <span id="child"> and child</span>
</p>

正常运行时两个元素的计算字号都是18px，如果确实出现父元素16px、子元素18px的表现，优先排查样式覆盖、元素节点选错的问题，和em本身的计算逻辑无关。

稳定实现相对字号的替代方案 #

如果需要更可控、不受其他因素干扰的「按父元素字号倍数设置子元素字号」效果，可以选择以下方案：

• 用CSS变量传值：这是稳定性最高的方案，完全绕开相对单位的继承逻辑，倍数可以自定义，无论嵌套多少层、切换什么字体都不会出现计算错乱：

  #container {
    --parent-font-size: 18px;
    font-size: var(--parent-font-size);
    font-family: serif;
  }
  #child {
    font-family: monospace;
    /* 要1倍就乘1，要1.2倍就乘1.2，计算逻辑完全透明可控 */
    font-size: calc(var(--parent-font-size) * 1);
  }
  

• 用rem单位：rem的参考值永远是根元素<html>的计算字号，不会出现em那种多层嵌套后字号累加错乱的问题，适合搭建全局统一的字号体系，只要先给html设置明确基准字号（比如html { font-size: 16px; }），所有rem值的计算结果都是固定的。
• 用font-size-adjust修正视觉差：如果只是不同字体同字号下视觉大小差异明显，不需要改动字号计算逻辑，通过这个属性按字体x高度比例调整渲染尺寸，就能让不同字体的视觉观感保持一致。

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