为什么增加 <span> 的字体大小与其他字体大小不成比例？

Question

我想将以下文本增加到 font-size: 3em，"Some" 和 "text"。当我应用以下内容时：

* {
  font-size: 10px;
}

.foo {
  font-size: 3em;
}

<div>
  <div class="foo"><span>Some</span> text</div>
</div>

<span> 中 "Some" 的大小增长速度比 "text" 高得多。为什么会发生这种情况，我该如何预防？

Answer 1

您应该在整个页面中使用一致的字体尺寸。如果您使用 px，请坚持使用 px。如果您使用 em 或 rem，请坚持使用。现在您正在显示两个不同的测量值（这很可能是问题所在）：

* {  font-size: 10px;  }
.foo {  font-size: 3em;  }

由于pixels和em显示不同，改成：

* {  font-size: 10em;  }
.foo {  font-size: 3em;  }

或者，将其更改为两个字体大小元素都使用 px。您的选择。

Answer 2

因为 * 选择器还会选择所有，包括 span 元素，除非有另一个 CSS 规则覆盖它。所以 foo DIV 的内容是 3em（= 3 x 10px），而其中的 span 被 * 规则重置为 10px。

如果你为 div 而不是 * 定义 10px 大小，整个事情看起来不一样：

div {
  font-size: 10px;
}

.foo {
  font-size: 3em;
}

<div>
  <div>Font size defined for DIVs</div>
  <div class="foo"><span>Some</span> text</div>
</div>

Answer 3

* 选择器匹配所有元素。在此 (*) 选择器上定义的规则优先于 parent 元素上定义的规则。

因此，即使默认情况下 font-size 是继承的，.foo 上的 font-size 也不会影响 child 上的 font-size， span.

您可以阅读通用选择器 *，具体了解何时使用它。

默认值 font-size 通常是您要在 html 元素上定义的内容。哪个可以解决您的问题：

html {  font-size: 10px;  }
.foo {  font-size: 3em;  }

这样，从 .foo 继承的 span 的字体大小优先于从 html 继承的 font-size 的字体大小。作为上述代码的结果，div 中带有 class .foo 的文本和 span 中的文本将具有相同的值 (3em) 和相同的计算值（3 倍 10px）。

如果你这样做了：

html {  font-size: 10px;  }
.foo {  font-size: 3em;  }
span {  font-size: 3em;  }

Span 的值仍为 3em，但计算值将为 10px * 3 * 3 (90px)，比 .foo 的字体大小大 3 倍。这是因为 em 是相对于 parent.

的 font-size

Why is increasing the font-size of <span> disproportionate compared to the rest?