【发布时间】：2021-03-14 08:07:31
【问题描述】：
我没有遇到典型问题 (javascript) 我想在 div 容器中设置特定文本的行高以完全匹配文本大小，包括自定义字体。现在，行高设置为 1，下面是 Arial 字体的结果：
我想要这样的东西：
如果文本是：eeeM 或/和 eeeg 等，它必须适合。
我需要这个，因为后来当我在 imagick 中修剪它时，文本的位置不正确（它直接放在左上角，在第一个图像情况下，eee 将放在顶部，它会像前端一样不同.而且当我不在imagick中修剪它时，容器与它在div上的呈现方式不同。
我已经尝试用画布计算文本高度，计算最大字体大小和文本高度之间的差异，然后这个百分比差异适用于 div 容器的 lineHeight，但它对于不同的字体大小、不同的文本内容效果不佳和不同的字体..
有什么想法吗？
编辑： 我的话题被关闭了，没有任何解释。 让我们从一个答案中获取代码，我应该将行高设置为 1em (1)。请在两个示例上打开开发工具并将其悬停在开发工具中以查看容器高度。
<p>Example 1 - this is not what I want</p>
<h1 style="font-size:100px;line-height:1em; padding: 0; margin: 0;">eee</h1>
<p>Example 2 - this is what I want</p>
<h1 style="font-size:100px;line-height:0.3; padding: 0; margin: 0; height: 50px">eee</h1>【问题讨论】：
-
因为字体大小会有所不同。您可以做的是创建一个画布，绘制字符串。通过读取像素计算绝对边界。然后获取该 int 并将其作为 px 应用于 line-height。
-
即使你找到正确的行高也不够，因为你无法控制从哪里开始计算行高（你肯定会截断文本）。
-
如果您的目标是居中检查：stackoverflow.com/q/58924157/8620333
-
还有一个关于某人如何解决问题的示例：iamvdo.me/en/blog/… 在这篇 Figma 文章中也有一些很好的背景：figma.com/blog/line-height-changes 除非您使用许多不同的字体，否则最实用的选择通常是把它变成一个“幻数”（可能至少通过一个 CSS 变量）。否则，您需要根据字体度量来计算它，例如。在第一个链接中使用 OpenType.js。
-
kennethormandy，非常感谢您的资源。它们对我非常有帮助和价值:)
标签： javascript html css text fonts