text - @font-face 嵌入字体高度问题

Question

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

如果您检查此示例页面上的文本，您会明白我的意思。

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

谢谢！

Answer 1

对于初学者来说，计算line-height的是65px，所以如果你愿意，你可以随时将它定义为60px。

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

Answer 2

你在那里使用<h2>标签。对于h标签，使用 CSS 样式的边距和填充来删除那些多余的空格。

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