在<p>标记内嵌套<span>，提供不同的字体大小

Question

将em直接应用于<p>标记和嵌套<span>标记的放大字体大小会产生不同的结果。

body {
 font-size: 14px;
}

p {
 font-size: 1.4em;
}

.enlarge {
  font-size: 1.7em;
}

<p>Normal paragraph text</p>

<p class="enlarge">Enlarged text</p>

<p><span class="enlarge">This text comes out larger than the above.</span></p>

我期待<p class="enlarge">和<p><span class="enlarge">给我相同的结果。

以下是一个工作示例：https://jsfiddle.net/huymo47b/

Answer 1

您可以使用rem（root em）代替em

em相对于父元素，而rem从根（html）值引用

css代码变为

body {
 font-size: 14px;
}

p {
 font-size: 1.4em;
}

.enlarge {
  font-size: 1.7rem;
}

可以在此处测试代码：https://jsfiddle.net/zrzahoro/

<强>更新

rem从root获取引用，它是html标记。如果要控制css中引用的字体值而不是让它使用浏览器默认值，请将固定字体大小赋予html标记。

Answer 2

  

＆＃34; em单位是基于父元素的字体大小的计算值的相对单位。这意味着子元素始终依赖于其父元素来设置其字体大小。＆＃34;

参考：CSS-Tricks

您的<p>标记已经有正常大小的1,4，<span class="enlarge">是其父级的1,7（已经放大）。