有没有办法让 HTML5 中的文本字符齐平到其边界框的顶部？

Question

这是 HTML 中的 Label 元素，红色虚线轮廓显示了它的边界框。请注意，字符并未与其边界框的上边缘齐平：

line-height:1.2; /* default */

这是 JSFiddle，显示了上面的图像http://jsfiddle.net/6gLQU/16/。

这是相同的文本，其中line-height样式设置为 1 或 100%（更好，但仍然不齐平）：

line-height:1;

最后，如果我将样式设置line-height为 0.8 (80%)，如本代码示例所示，除了最后一个测试文本中存在较小但可接受的单像素差异之外，它是齐平的。这很好，但如果有多于一行文本（多行），则下一行会被拉得太高，因为这会使每行高度达到其实际高度的 80%。

line-height:.8;

这是 JSFiddle 代码http://jsfiddle.net/6gLQU/16/。

---

（如果您不了解 Flash，可以跳过本段） 在 Flash TLF（FTE 或 Flash 文本引擎）中，如果添加文本字段，使用 FTE 或 TLF 作为引擎，文本字符会对齐到最顶部边界矩形。它们看起来像最后一张图片中的文本（字符紧贴边框的顶部边框）。

---

在 HTML 中，文本字符未与边界矩形的顶部齐平，如上面的示例所示。当您增加字体大小时，也会增加从字符顶部到边界框矩形顶部的间隙。

在我对 HTML 和 CSS 中使用的文本的研究中，字体样式line-height将调整文本字符在其边界框内的位置（如上图所示）。在 Flash 中，line-height样式不会影响第一行文本中的字符，但会像在 HTML 中一样调整以下行（因此它不适用于 HTML 或 Flash 中的多行）。

我已经确定，如果我在 HTML 中将行高设置为 0.8 或 80%，则字体会与边界框的顶部齐平（如上所示）。伟大的！这就是我想要的，但它不适用于多行文本。如果有多条线，则下一行将被“拉起”并与前一行重叠，因为显然，我只为每条线提供其实际高度的 80%。

---

无论如何，我的问题是：

1. 是否有其他方法可以使 HTML 字符齐平到边界框的顶部？我正在使用的 hackline-height会导致多行文本靠得太近。
2. Flash TLF 中是否有设置使其行为和显示像 HTML 文本行？也就是说，使其不会将文本字符拉到边界框的顶部（匹配 HTML 布局规则）。

---

我找到了一个使用负边距空间的替代方案，但我必须手动输入它。它并不理想，因为每种字体大小都有不同的值（通过反复试验发现），并且它向上移动文本框，而不是字符。通过line-height我可以使用的 hack .8，我知道它会被正确定位。

这是使用负边距的代码和图片的链接。我只将它应用于最后一个元素。注意红色边框：

font-size:64px;
line-height:1.2;
margin-top:-14px;

这是另一个测试，另一个测试使用 12 的倍数并使用负保证金百分比。同样，每个负保证金值都是不同的，是通过反复试验发现的：

font-size:12px;
line-height:1.2;
margin-top:-.19%;

以下是有关FTE 引擎的信息。我读了一个小时，现在我意识到我认识其中的一些单词。

PS抱歉这个问题太长了。显然，我正在努力赢得最长帖子奖。另外，我添加了两个问题，因为存在实际问题，然后存在解决方法问题，如果实际问题可以解决，则可能不需要解决方法问题。我不知道这叫什么，但有人告诉我这是关于 SO 的编程问题的常见问题。另外，添加 Firefox 标签，因为它在 Firefox 中运行，并且 Firefox 开发人员之一可能会看到它并知道这一切是如何工作的。

2019 年更新：
我在某处发布了另一个关于此问题的问题，但已接受的修复适用于特定字体，但不适用于每种字体。

IIUC 文本字符的顶部边缘（称为字形）称为大写高度，字形周围容器的高度称为 em 高度。每种字体的大写高度都不同，因为字体的样式不同并且由不同的作者创建。

IIUC 浏览器不根据 em 或字体大小进行定位，并且不考虑大写字母高度。

我对浏览器的一个功能请求是支持在大写高度处对齐段落或标签文本的第一行，以便文本与顶部边缘齐平。这可能是负文本边距。这将使浏览器准确地再现许多设计工具所支持的内容。

// something like any of these: 
align-caps-height: true;  
first-line-position: caps-height;
margin-top: caps-height;

Answer 1

字体间距不是这里的问题，因为文本会均匀缩放。问题是由百分比余量造成的。边距百分比按宽度百分比计算。因此，正如您所期望的，利润率百分比和

方法一

您可以做的是，找到一个块的边距（以像素为单位）。然后让k = font_size/ margin该块。除以font-size得到k其他块的余量。

方法二

不要使用保证金百分比，而是尝试transform: translate;使用em值：

相关代码

label { /* added properties*/
  transform: translateY(-0.2em);
}

更新了小提琴 1

方法三

我意识到，虽然有点晚了，但这transform不是必需的。你可以简单地使用margin-top: -0.2em;

相关代码

label { /* added properties*/
  margin-top: -0.2em;
}

更新了小提琴 2

label { /* added properties*/
  transform: translateY(-0.2em);
}

label { /* added properties*/
  margin-top: -0.2em;
}