我的h1标签中的em和rem有何不同？

Question

我已经学会了em和rem的基础知识，但仍然无法弄清楚为什么我的h1标签的em和rem会产生不同的字体大小。

html {
  font-size: 100%;
}


body {
  background-color: white;

}

.page-heading {
  background-color: $primary-color;
}

h1 {
  font: 2rem 'Bungee Shade', cursive;
  color: white;
}

在这段代码中，我将html字体大小设置为100％，与16px相同。 2rem因此总是32px - 当我用32px替换字体大小时，我可以确认它与2rem相同。

然而，当我改为2em时，字体大小较小，即使1em在技术上应该是16px。我玩了插入不同的像素字体大小，这似乎2em等于28px。对于我的生活，我无法弄清楚为什么！