css - 标题中的字体尾部

Question

您好，我有问题，您可以在这里看到：http: //adrianwajs.pl/monika/。当您将鼠标悬停在 h2 上时，“即将推出”标志，您可以看到，在 firebug 中，您可以看到字母 g 不适合 h2 元素的高度。我已经看过很多次但我找不到解决方案，也许有人有？

Answer 1

一般来说，一个字形可以很好地延伸到一个行框的底部边缘以下，即使文本设置为实心（行高等于字体大小）。这取决于字体设计师。如果这会导致问题，请使用更大的行高或不同的字体。

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

更新：页面上使用的 Pacifico 字体的特性导致包含该字体文本的行框具有较大的高度，大于line-height. 在页面上，在 Firefox 中，span包含“即将推出”的内容是 128 像素高，因此超出了它的容器h2元素。

行框高度是由浏览器根据高度要求计算的，包括字体属性，没有直接的控制方法。您只需要忍受它并提供足够的间距和边距或填充。

Answer 2

首先，您的 h2 说“即将推出”而不是“即将推出”

我在 Chrome、IE、Firefox 中没有发现问题。

你可以做两件事：

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