标题中的字体尾巴

Question

你好我有问题你可以在这里看到：http://adrianwajs.pl/monika/。当你将鼠标悬停在h2上时“很快就会出现”标志，你可以看到它，在萤火虫中你可以看到字母g不符合h2元素的高度。我已经看过很多次，但我找不到解决办法，也许有人有？

Answer 1

首先，你的h2说'很快就会'而不是'即将推出'

我没有在Chrome，IE，Firefox中看到任何问题。

您可以做两件事：

• h2标签上的更多填充。例如h2 { padding: 30px; }
• 例如line-height: 1.5;
的行高

Answer 2

通常，即使文本设置为实线（行高等于字体大小），字形也可能会延伸到行框的下边缘以下。这取决于字体设计师。如果这会导致问题，请使用较大的行高或不同的字体。

在您的页面上，下降器实际上并没有延伸到那么远，例如，您可以通过绘制标题的轮廓来看到。但它几乎延伸到字体的底部并远低于基线;这在模仿手写的字体中并不少见。

更新：页面上使用的Pacifico字体的功能会导致包含该字体文本的行框具有较大的高度，大于line-height。在页面上，在Firefox中，由于这些原因，包含“即将推出”的span高128像素，因此会延伸到其容器h2元素之外。

线框高度由浏览器根据高度要求（包括字体属性）计算，并且没有直接的方法来控制它。您只需要使用它并提供足够的间距或边距或填充。