0

我正在向我的网站添加引导程序，我注意到，当我使用窄分辨率（Windows 大小）时，我的标题重叠。如果我的标头尺寸很小，就像通常的 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>

例子

4

1 回答 1

1

你应该修改line-height：

.nevis-font {
    font-family: 'Nevis', Tahoma, sans-serif;
}
.ultra-head {
    font-size: 7.8em;
    line-height: 1.5;
}
  • 不要以像素为单位使用行高，它不会缩放。使用无单位值（或百分比或 em，但这是等效的）。
  • 也不要设置line-height在 1 以下。
  • 默认值在 1.3 或 1.4 左右
  • 无障碍指南建议至少 1.5
  • 当你想使用 1 的 line-height 是有原因的，但那是你确定不会有 2 行内容的时候。罕见情况

字体制作者可以自由地使用嵌入在字体文件中的基线和其他属性来做任何他们想做的事情：脚本字体可以跨越 3 行文本，如果他们愿意，可以实现一些奇特的效果！（我相信）。
tl;dr 具有完全相同的排版参数，其中的每个字体和字符将占据不同的高度和宽度等

编辑：在 Firebug 的任何地方都可以看到负边距吗？

于 2013-05-11T09:08:01.893 回答