当我减少标签上的行高时，单词会相互重叠

Question

我在CSS中使用这些大小的文本，但我遇到行高的问题。我想减少CSS中的行高，但是当我使用标记标记时，单词将在彼此之间。我附上了一张显示问题的图片：

代码：

＆＃13;

＆＃13;

h1 {
  font-size: 58px;
  text-transform: uppercase;
  margin: 0px 0px;
  line-height: 1em;
  font-family: "frutigerBold75";
}

＆＃13;

<h1><mark>Guidelines on Certification <br />and Grading</mark></h1>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该将所需的line-height放在mark

中

之前的

＆＃13;

＆＃13;

h1{
  font-size: 58px;
  text-transform: uppercase;
  font-family: "frutigerBold75";
  line-height: .8em;
}

＆＃13;

<h1><mark>Guidelines on Certification <br />and Grading</mark></h1>

＆＃13;

＆＃13;

＆＃13;

后的

＆＃13;

＆＃13;

h1{
  font-size: 58px;
  text-transform: uppercase;
  font-family: "frutigerBold75";
}
mark{
  display: block;
  line-height: .8em;
}

＆＃13;

<h1><mark>Guidelines on Certification <br />and Grading</mark></h1>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在我看来，问题是字体问题。 （这就是为什么如果运行代码片段它是正确的。）

我建议尝试更改行高（手动），直到得到您想要的结果。

此外，您可以记住的其他内容是内部填充（因为它似乎是您添加的图片中的一些。

遗憾的是，如果没有使用相同的字体，您可以使用它进行调试，并为您提供更多帮助。

所以，回顾一下：

• 手动调整线高（例如，为1.1em或更高）
• 尝试使用其他字体
• 将填充设置为0，并根据需要开始添加一些