在多尺寸标题中均匀分布 space

Question

我正在尝试使用 CSS 和 HTML 重现旧式标题。这是我想出的代码。

body {
  font-family: Palatino;
}

header {
  text-align: center;
}

h1 {
  text-transform: uppercase;
  font-weight: normal;
}

.small {
  font-size: 12pt;
  letter-spacing: .1ch;
}

.medium {
  font-size: 18pt;
  letter-spacing: .2ch;
}

.large {
  font-size: 27pt;
  letter-spacing: .3ch;
}

<h1>
  <span class="large">Officia in mollit</span><br>
  <span class="medium">elit anim ut culpa in irure</span><br>
  <span class="small">enim officia excepteur ex ad sint magna</span><br>
  <span class="large">magna ut minimu</span><br>
  <span class="medium">nisi dolore minim aute</span><br>
  <span class="small">nisi dolore minim aute laboris</span><br>
  <span class="medium">ex laboris culpa</span><br>
</h1>

但是，我遇到的问题是 space 在标题的不同行之间分布不均。

Answer 1

删除 <br> 元素，并将跨度元素设置为 display: block;（或将其替换为 div 元素）。在 <h1> 元素上设置 line-height: 1，使行高适合字体大小。

body {
  font-family: Palatino;
}

header {
  text-align: center;
}

h1 {
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1;
}

h1 > span {
  display: block;
}

.small {
  font-size: 12pt;
  letter-spacing: .1ch;
}

.medium {
  font-size: 18pt;
  letter-spacing: .2ch;
}

.large {
  font-size: 27pt;
  letter-spacing: .3ch;
}

<h1>
  <span class="large">Officia in mollit</span>
  <span class="medium">elit anim ut culpa in irure</span>
  <span class="small">enim officia excepteur ex ad sint magna</span>
  <span class="large">magna ut minimu</span>
  <span class="medium">nisi dolore minim aute</span>
  <span class="small">nisi dolore minim aute laboris</span>
  <span class="medium">ex laboris culpa</span>
</h1>

在多尺寸标题中均匀分布 space

Evenly distribute space in multisized title

css

spacing