为什么CSS中的em单元在这种情况下不像预期的那样工作？

bnlyeluc 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(130)

我正在学习字母间距。我在这里使用em单位来表示字母间距。我使用单元的元素除了html没有任何父元素。但是如果我改变HTML的字体大小，字母间距不会改变。
起初，HTML标记在代码中不存在。我试着添加它们，看看它是否有效。我也尝试将font-size设置为:root，但都不起作用。

html {
  font-size: 2px
}

h1 {
  font-family: 'COUTUREBold';
  margin: 0;
  font-size: 38px;
}

.wide {
  font-size: 24px;
  letter-spacing: .5em;
}

.narrow {
  font-size: 48px;
  letter-spacing: -.15em;
}

<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/couture" type="text/css" />

<h1>Hello World!</h1>
<h1 class="wide">Hello World!</h1>
<h1 class="narrow">Hello World!</h1>

产品编号：https://codepen.io/KAEKrishCodes/pen/ExOYxPY

css

来源：https://stackoverflow.com/questions/76399258/why-does-em-unit-in-css-not-work-as-expected-in-this-case