如何将带有文本的块准确地拟合到文本边界？答案

【问题标题】：How to fit Block with Text accurately to Text boundaries?如何将带有文本的块准确地拟合到文本边界？
【发布时间】：2020-06-20 00:48:15
【问题描述】：

块是

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

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

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

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

我得到的方块的图片。

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

【问题讨论】：

永远记得你有jpq和ÂÄÊ这样的字符

标签： html css text boundary

【解决方案1】：

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

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

&lt;h2&gt;Test jpg ÂÄÊ&lt;/h2&gt;

【讨论】：

我们是否需要不同的字体系列——不同的行高值以适合文本？
@Andrii 是的。我一直在寻找一个图表来显示这是如何计算的，但到目前为止还没有运气。我相信这是确定差异的比例计算（这里似乎顶/底线是 5px，但这可能是线高本身的一个因素）。
根据@TemaniAtif 的评论，我添加了一些示例来展示这些领域的设计目标。
@Andrii 是的，每个字体系列都需要一个不同的字体，这不是通用的。检查此以更好地理解：stackoverflow.com/a/55978512/8620333

【解决方案2】：

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

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

【讨论】：