html - 使用 vw 字体大小时填充文本

Question

我正在使用 vw 根据打开页面的浏览器放大文本。但是，填充比预期的要大。我希望它恰好位于我页面的右上角，几乎没有填充。 (我尝试了 padding:0px; 但没有结果)。这是一个例子:

在 HTML 中:

<heading>some text</heading>

在 CSS 中:

heading{
  font-size:5vw;
  padding:0px;
  margin:0px;
}

Answer 1

这可能是因为大多数字体(包括系统字体)没有完全延伸到每个字形的边界框的顶部和底部。这意味着即使元素的高度为 1em，大写字母也不会触及元素的顶部。

要解决这个问题，您可以尝试使用您的字体，看看字母的顶部和底部落在哪里。这对于每种字体可能不同，并且还取决于上升器的高度。通常，上升股高于上限高度。

对于 Times New Roman，以下适用于大写字母:

<span>Foobar</span>

span {
  background: #ddd;
  display: inline-block;
  line-height: .70em;
  vertical-align: text-top;
}

这里要改变的行是行高。玩这个应该会给你你需要的结果。例如，.70 仍将“O”剪掉了一点。

我建议使字体比需要的大得多，调整行高，然后再缩小。

span {
  background: #ddd;
  display: inline-block;
  line-height: .70em;
  vertical-align: text-top;
}

body {
  padding: 0;
  margin: 0;
  font: serif;
  font-size: 20vw;
}

<span>FOOBAR</span>