具有不同响应字体大小的行之间的相同空间距离答案

【问题标题】：Same space distance between lines with different responsive font sizes具有不同响应字体大小的行之间的相同空间距离
【发布时间】：2022-12-20 03:21:02
【问题描述】：

无论每个文本的大小如何，我如何才能使文本相互粘附。现在发生的是test <> test_2 和test_2 <> test_3 之间存在不同的差距。特别是在调整div 大小时。

<div>
    
    <div style="font-size:2vw">test</div>
    <div style="font-size:10vw">test2</div>
    <div style="font-size:3vw">test3</div>
    
  </div>

https://jsbin.com/koqobexuna/edit?html,output

【问题讨论】：

不同的高度部分是由于上升器和下降器所允许的空间引起的视觉错觉 - 如果您使用 LgWy 作为测试词，它看起来更好吗？每行还有一个与其相关联的行高 - 名义上约为 1.2em，这显然会随着字体大小的变化而变化 - 您可以尝试将行高固定为特定高度（但请注意这可能会导致重叠）

标签： html css responsive

【解决方案1】：

取决于显示的文本 - 例如小写字母与大后裔或大写字母——你无法避免行与行之间的不同空格。
另见："Typography – The Anatomy of Letters"

您只能通过调整设计/布局概念来减轻这种影响：

通过text-transform: uppercase;切换到大写字母
使用带有负边距的伪元素将你的行裁剪到上限高度
在行 div 之间添加绝对边距（使用 px 或 rem 单位）

.flex {
  display: flex;
  gap: 2em;
}

.uppercase {
  text-transform: uppercase;
}

.line:before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: -0.18em;
}

.line {
  line-height:1em;
  margin-bottom: 1vw;
  position: relative;
  height: 0.66em;
  outline: 1px dotted red;
}

<div class="flex">

  <div class="heights">
    <div class="line" style="font-size:2vw">ghx </div>
    <div class="line" style="font-size:10vw">gxx </div>
    <div class="line" style="font-size:3.5vw">hhh </div>
    <div class="line" style="font-size:1vw">hhh </div>
  </div>
  
  <div class="heights uppercase">
    <div class="line" style="font-size:2vw">ghx </div>
    <div class="line" style="font-size:10vw">gxx </div>
    <div class="line" style="font-size:3.5vw">hhh </div>
    <div class="line" style="font-size:1vw">hhh </div>
  </div>

  <div class="heights uppercase">
    <div class="line" style="font-size:2vw">hhh </div>
    <div class="line" style="font-size:10vw">hhh </div>
    <div class="line" style="font-size:3.5vw">hhh </div>
    <div class="line" style="font-size:1vw">hhh </div>
  </div>

</div>

【讨论】：