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

【问题标题】：How to solve Line height issue with custom font in HTML?如何解决 HTML 中自定义字体的行高问题？
【发布时间】：2016-12-05 16:38:19
【问题描述】：

我在使用自定义字体（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...

【问题讨论】：

我记得，行高不需要像 px 这样的单位。就放 1.2 1.5 否则
谢谢@obink，我给了行高 1.3，它仍然显示同样的问题
我认为 Poppins 字体的设计行高有问题。我在我们的网站上使用这种字体，虽然我正在更改行高，但它并没有完全显示。

标签： html css fonts

【解决方案1】：

您可以删除 line-height 属性或 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;
 }

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

【讨论】：

是的，改变/增加行高可以解决问题，但我需要保持相同的行高并解决问题。有没有办法编辑字体？因为，似乎字体在顶部和底部包含一些额外的空间
我已经更新了答案而不更改line-height

【解决方案2】：

这里的问题是字形的垂直放置。设计师决定这样设置字体字形。

所以，基本上设计师决定了基线下方有多少空间，以及大写字母高度上方有多少空间。通常这些空间是相等的，但它们不需要是。

我认为对你来说唯一的解决方案是在使用该字体的段落上放更大的line-height，或者只是选择不同的字体。

【讨论】：

嗨，感谢您的评论。有没有办法编辑自定义字体以及如何删除多余的空间。？因为，我处于无法使用行高或字体的情况。但是，但是我需要解决这个问题，我不知道该怎么做。
我从来没有这样做过，但是有一些字体编辑器可以让你操作字体。这个是免费的：fontforge.github.io。祝你好运。 :)

【解决方案3】：

改变： line-height: 32px;转line-height: auto;

【讨论】：

有什么办法可以在不改变行高的情况下解决这个问题..？
您可能必须手动编辑字体；自定义字体可能有问题。将 line-height 设置为 auto 是最好的选择，它只是额外的一行代码，所以我认为使用 line-height 属性没有问题。
auto 是 line-height property (MDN) 的无效值。在 Fx 和 Chr DevTools 中测试。还有关于字体：它可能 不是错误，而是一个特性©：这是设计师的选择（这在 CSS 中很烦人，当然，因为我们必须根据每个字体来适应，而不需要太多我们可以使用的工具...）

【解决方案4】：

试试这个

.highlightPhrase {
    padding:5px;
}

【讨论】：