如何使带有文本的块准确地适应文本边界？

Question

该块是

<h2>Test</h2>

<style>

    h2 {

        padding: 0;

        margin: 0;

        line-height: 1;

        font-family: "Montserrat", sans-serif;

        font-size: 34px;

    }

</style>

我从顶部到底部的距离很小。

如何使文本精确地适应其块？

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

我得到的块的图片。

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

Answer 1

你所看到的是line-height. 例如，将其设置为 less 以删除文本上方和下方分配的空白区域。h2 {&nbsp; outline: 1px solid red;&nbsp; padding: 0;&nbsp; margin: 0;&nbsp; line-height: 1;&nbsp; font-family: Roboto, sans-serif;&nbsp; font-size: 34px;&nbsp; line-height: 24px;}<h2>Test jpg ÂÄÊ</h2>

Answer 2

如果您使用 vw（视口宽度）单位设置类型，则可以找到一个精确的数字，其中文本非常适合容器，并且在调整大小时不会中断。在这种情况下，h2{font-family: Roboto, sans-serif;font-size: 25.5vw;}