html - 内联子项的字体大小不生效

Question

我可以正常设置span的字体大小。

当它大于 h1 的字体大小时，它确实有效:

<style>
h1 {
    font-size: 1em;
}

span {
    font-size: 2em;
}
</style>

<h1>Normal text, <span>bigger one</span></h1>

JSFiddle:http://jsfiddle.net/We9nu/

反之则无效。我也尝试过使用“!important”:

<style>
h1 {
    font-size: 2em;
}

span {
    font-size: 1em;
}
</style>

<h1>Bigger text, <span>normal one</span></h1>

JSFiddle:http://jsfiddle.net/FGV5Z/1/

是否可以使用此 HTML 标记来实现？

我已经使用 Firefox 和 Chromium 进行了测试。

谢谢。

Answer 1

在第二个例子中你需要做的

h1   {  font-size: 2em; }
span {  font-size: .5em; // half of parent element }

如果您在子元素中设置 1em，您实际上是在定义与父元素相同的字体大小，因为 em 是相乘的(2em * 1em 仍然是2em，而 2em * 0.5em 是 1em 作为结果字体大小)

参见 this resource关于可用的字体单元及其工作方式