html - 如何在编码像素完美设计时处理行高

Question

这是我编写的示例设计的屏幕截图:

字母底部和红线之间有10px的空间。我正在尝试使用以下代码复制它:

font: normal 40px arial;
border-bottom: 3px solid red;
padding-bottom: 10px;

从技术上讲，这段代码应该能准确地给出我想要的。但事实并非如此。这是它在 Chrome 中运行的屏幕截图:

由于行高，文本和边框之间存在额外的空间。这是 Chrome 上经过检查的屏幕截图:

当我花时间测量由行高引起的字母下方的空间时，我可以看到这是一个 9 像素的空白区域。因此，要在文本和边框之间留出 10px 的空间，我需要将代码更改为:

padding-bottom: 1px;

对此的解决方案可能是添加一个 line-height 属性，其中包含设计文件中文本的精确高度。但是，如果文本包含多行，它就会变得困惑。

这里完成像素完美设计转换的最佳方法是什么？

Answer 1

在 HTML 中，无法指定文本基线和边框之间的间距。要理解这一点，请看这张图片:

HTML 文本的高度始终包括升部区域和降部区域，即使在没有带有降部或升部的字母的情况下也是如此。因此，在您的示例中，文本底部与边框之间的实际距离不是 10px。

要获得与文本底部的正确距离(以像素为单位)，请更改文本，使其包含带有下行字母(例如 Hellp、Worly)的字母，并测量下行底部与红线之间的空间。

或者，如果您尝试重新创建图片但无法更改文本，请使用绘图应用程序(例如 Inkscape)测量所用字体的文本高度/磅值 比率，然后计算距离如下:

css distance = baseline distance - (point size * (1 - ratio))