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

Question

我正在向我的网站添加 Bootstrap ，我注意到，当我使用较窄的分辨率(窗口大小)时，我的标题会重叠。如果我的页眉尺寸较小，如通常的 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>

Answer 1

你应该修改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 中是否存在负边距？