如何在同一段落或标题中设置不同的行高

Question

我读到，为了有一个漂亮的轮廓，不应该将头用作HTML5的其他头的子文本。例如：

<h1>Frustration</h1><br />
<h2>The life of developers</h2>

相反，它可以这样写：

<h1>Frustration
    <br />
    <span style="font-size: 0.67em">The life of developers</span>
</h1>

问题是我无法控制潜台词的行高。它采用H1的线高度，这似乎总是有点太远了。

我意识到可以做这样的事情：
h1+.副标题
针对相同的内容，但我只想知道上面的第二个选项是否有任何方法可以让我操作具有两个不同行高的段落。

编辑：我正在使用最新版本的Firefox。

当我继续寻找解决方案时，我开始怀疑这是否是一个愚蠢的问题，因为浏览器没有理由认为用户会希望在同一个标签内有不同的行高——尤其是当有其他选择时，比如使用顶部为负的块元素。

Answer 1

您可以这样做：

<h1>
  <span class="mainText">Frustration</span> 
  <span class="subText">The life of developers</span>
</h1>

h1 .mainText {
 display: block; /* this prevent the need for the <br/> */
 /* additional style for the main header text */
}
h1 .subText {
  /* styling for the subtext */
}

你也可以这样做（我想这更容易）：

<h1>text
    <div>subtext</div>
</h1>

h1 div {
  font-size: 0.67em
}

潜台词的行高会更低。后一个见jsfiddle：http://jsfiddle.net/wLD35/