在<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需要从根引用,它的HTML标签.如果要控制css中引用的字体值而不是让它使用浏览器默认值,请给出固定的font-size html标签.

Answer 2

"em单位是一个基于父元素字体大小的计算值的相对单位.这意味着子元素总是依赖于它们的父元素来设置它们的字体大小."

参考:CSS-Tricks

您的<p>标签已经是正常大小的1,4,并且<span class="enlarge">是其父级的1,7(已经放大).