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

Question

我想将以下文本增加到字体大小：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

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

如果您为div而不是*定义10像素大小，则整个外观看起来会有所不同：

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 2

*选择器匹配所有元素。在（*选择器上定义的规则优先于在父元素上定义的规则。

因此，即使默认情况下继承了font-size，.foo上的字体大小也不影响子span上的字体大小。

您可以阅读*（通用选择器），特别是有关何时使用它的信息。

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

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

这样，从span继承的.foo的字体大小优先于从font-size继承的html。 由于上述代码，div内具有类.foo的文本和span内的文本将具有相同的值（3em）和相同的计算值（3乘以10px ）。

如果您这样做：

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

Span仍将具有3em的值，但是计算出的值将为.foo的字体大小的10像素* 3 * 3（90像素），大3倍。这是因为em相对于父级font-size。

Answer 3

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

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

由于pixels和em的显示方式不同，因此将其更改为：

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

或者，对其进行更改，以使两个字体大小的元素都使用px。您的选择。