如何将带有文本的块准确地适合文本边界？

Question

块是

<h2>Test</h2>
<style>
    h2 {
        padding: 0;
        margin: 0;
        line-height: 1;
        font-family: "Montserrat", sans-serif;
        font-size: 34px;
    }
</style>

我在从顶部到底部的距离很小的地方遇到障碍物。

如何使文本完全适合其块？

文本的大写字母顶部需要作为块的边框。

我拿到的方块图片

蓝色区域 - 是方块。但是顶部和底部边框块与顶部和底部文本边框不同。预期结果 - 文本字符的顶部和底部是块边界。

Answer 1

如果您使用 vw（视口宽度）单位设置类型，您可以找到一个精确的数字，其中文本非常适合容器并且在调整大小时不会中断。在这种情况下，

h2{
font-family: Roboto, sans-serif;
font-size: 25.5vw;
}

Answer 2

您看到的是 line-height。例如，将其设置为 less 以删除分配在文本上方和下方的白色 space。

h2 {
  outline: 1px solid red;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-family: Roboto, sans-serif;
  font-size: 34px;
  line-height: 24px;
}

<h2>Test jpg ÂÄÊ</h2>

如何将带有文本的块准确地适合文本边界？

How to fit Block with Text accurately to Text boundaries?

html

css

text

boundary