为什么越来越多的不成比例的字体大小比其他人呢？

Question

我想增加下列文本字体大小：3EM，既“有”和“文本”。当我申请了以下内容：

* {
  font-size: 10px;
}

.foo {
  font-size: 3em;
}

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

在一个大大高于“文本”，“一些”内<span>的大小增加。为什么会出现这种情况，如何预防呢？

Answer 1

该*选择的所有元素相匹配。关于这个（*）选择定义的规则将优先于对父元素定义的规则。

因此，即使在默认情况下，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;  }

跨度仍然有3EM的值，但计算出的值将是10px的* 3 * 3（90像素），3倍，比.foo的字体大小。这是因为EM是相对父的font-size。

Answer 2

因为*selector还选择一切，包括span元素，除非有另一个CSS规则覆盖它。所以foo DIV的内容是3EM（= 3×的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

你应该在你的页面中使用的字体洽测量。如果您正在使用px，坚持px。如果您使用的em，或rem，坚持这一点。现在你是显示两个不同的测量（这是最有可能的问题）：

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

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

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

或者，改变它，以便这两个字体大小的元素使用px。你的选择。