html - 如何解决 HTML 中自定义字体的行高问题？

Question

我在使用自定义字体 (poppins-regular.ttf) 时遇到问题。问题是当我为作为文本包装的 span 标签设置背景颜色时。

像 g、y、.. 等词在底部被切掉了。但是，如果我将字体系列从 poppinsRegular 更改为 tahoma，它看起来不错。

但这里真正的问题是我需要保持相同的行高

.passageBody, .passageBody2 {
  width: 414px;
  padding: 10px 0;
  margin: 0px;
  font-size: 24px;
  line-height: 32px;
  font-family: 'Poppins', sans-serif;
}
.passageBody2 {
  font-family: tahoma;
}
.highlightPhrase {
  background-color: yellow;
}

<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">

<div class="passageBody">
  <span>“Good-bye to you and your funny feet.</span>
  <span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
<hr/>
<div class="passageBody2">
  <span>“Good-bye to you and your funny feet.</span>
  <span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>

Example jsFiddle link here...

Answer 1

您可以删除行高属性或 try to set它以 em 为单位。

line-height: 1.5em;

编辑 1

如果你不想改变行高，使用内联显示的垂直对齐

.highlightPhrase {
    background-color: yellow;
    display: inline;
    vertical-align: text-bottom;
}

编辑 2上面的代码可能在视觉上改变了行高。所以this example可能是您问题的优雅解决方案。只需将内容包裹在另一个元素中并将位置设置为相对，这样每行的背景就不会隐藏上面的行。

 .highlightPhrase span {
   position:relative;
 }

或者您可以使用一些小图像作为背景并重复它以突出显示整个文本。