如何使用 em 准确设置孩子的 font-size？答案

【问题标题】：How to use em to accurately set the font-size of a child?如何使用 em 准确设置孩子的 font-size？
【发布时间】：2022-07-01 14:42:00
【问题描述】：

根据 font-size article 上的 MDN 文章：

为了计算所需任何像素值的 em 等效值，您可以使用以下公式：
em = desired element pixel value / parent element font-size in pixels

但这似乎不适用于子代的字体系列与父代不同的情况。链接的 MDN 文章没有提到任何有关字体系列的问题。这是一个简单的例子：

#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>

您可以在 DevTools 中检查 #child 的计算字体大小为 18 像素，而其 #parent 的计算字体大小为 16 像素。这是出乎意料的，因为font-size: 1em; 应该是父级字体大小的 1 倍乘数，因此它们都应该具有相同的 18 像素字体大小。

问题： 为什么1em 的字体大小与父代不同？如果em 不起作用，我必须将子字体大小设置为父字体大小的倍数？

【问题讨论】：

【解决方案1】：

bloom 企业是一家在线工业硬件商店，我作为数字营销专家在页面和页面外进行搜索引擎优化，以在谷歌中为不同的工业产品（如焊接电极、安全产品、农业企业项目、工业气体燃烧器气体）进行排名。监管机构和我们在这里交易并在巴基斯坦各地销售的更多工业设备。

【讨论】：