html - 使用较窄的分辨率时，标题字母重叠

我在我的网站上添加了引导程序，并注意到当我使用较窄的分辨率（窗口大小）时，标题重叠。如果我的标头尺寸很小（如通常的H1尺寸一样），那没有问题。但是，当使用大尺寸（请查看下面的CSS）时，会出现图像中示例的问题。

我该如何解决？是否有垂直间距之类的属性？我是CSS的新手。可能的解决方法是使用Fittext。

CSS代码：

.nevis-font {font-family: 'Nevis', Tahoma, sans-serif;}
.ultra-head {font-size: 7.8em;}

HTML代码：

<div class="row-fluid">
    <div class="span12">
        <br/>
        <h1 class="text-center nevis-font ultra-head">DIOGO NUNES</h1>
        <br/><br/><br/>
    </div>
</div>

最佳答案

您应该修改line-height：

.nevis-font {
    font-family: 'Nevis', Tahoma, sans-serif;
}
.ultra-head {
    font-size: 7.8em;
    line-height: 1.5;
}

不要使用以像素为单位的行高，它不会缩放。使用无单位的值（或百分数或ems，但是是等效的）。
也不要将line-height设置为小于1。
默认值约为1.3或1.4
accessibility guidelines recommend at least 1.5
有一些原因需要您将行高设置为1，但是当您确定不会有2行内容时。稀有案例


字体制作者可以自由地对字体文件中嵌入的基线和其他属性进行任何操作：如果需要，脚本字体可以跨越3行文本以获得一些奇特的效果！ （我相信）。
tl; dr具有完全相同的版式参数，其中的每个字体和字符将占据不同的高度和宽度等

编辑：在Firebug中哪里可以看到负边距？

关于html - 使用较窄的分辨率时，标题字母重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16495521/