Question

使用@ font-face生成的文本的CSS对齐有些问题。出于某种原因，每个字母的底部都有大量的额外空间，将文本的包含框向下拉得太远。

如果您检查this sample page上的文字，您可以看到我的意思。

谷歌搜索并检查了一堆其他页面，但是这个让我难过。有人可以帮忙吗？

谢谢！

Answer 1

首先，计算出的line-height为65px，因此如果需要，您可以随时将其定义为60px。

但是，大多数空间实际上只是您选择的字体所需。虽然您已使用CSS将其转换为大写，但字体仍需要空间来渲染在文本基线下方绘制的字符。尝试在该标题的文本中添加一个逗号，你会发现它实际上非常庞大，应该填满大部分空白区域。

Answer 2

您在那里使用<h2>标记。对于 h 标记，使用CSS样式的边距和填充来删除这些额外的空格。

<style>
h2 {
   margin:0;
   padding:0;
}
</style>