如何在编码像素完美设计时处理线高

Question

以下是我编写的示例设计的屏幕截图：

字母底部和红线之间有10px的空间。我试图用以下代码复制它：

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

从技术上讲，这段代码应该给我我想要的东西。但事实并非如此。以下是Chrome中的操作截图：

由于行高，文本和边框之间有额外的空间。这是Chrome上检查过的截图：

当我花时间测量由线高引起的字母下面的空间时，我可以看到它是一个9px的空白区域。因此，要在文本和边框之间获得10px的空间，我需要将代码更改为：

padding-bottom: 1px;

对此的解决方案可能是在设计文件中添加一个行高属性，其中包含文本的确切高度。但是，如果文本包含多行，那么它会变得混乱。

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

Answer 1

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

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

要获得与文本底部的正确距离（以像素为单位），请更改文本以使其包含带下划线的字母（例如Hellp，Worly“），并测量下划线底部与红线之间的间距。< / p>

或者，如果您尝试重新创建图片但无法更改文本，请使用绘图应用程序（例如Inkscape）测量所用字体的比例text height / point size，然后按如下方式计算距离：< / p>

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

Answer 2

字符（字形）下方和上方的基本间距由字体设计者定义。例如，在Arial中，即使文本设置为solid（line-height: 1），也会在普通的大写字母（如“H”）下方和上方留出空格。 line-height大于1时，附加间距低于及高于此值。即使小于1的line-height（即，具有“负前导”），也可能存在一些间距。你设置的任何填充都会增加它。

如果您知道内容中出现的确切文本（并且它永远不会更改），并且如果您依赖特定字体始终可用（这很可能，但不确定，对于Arial字体），那么您可以运行一些实验并迭代，直到找到合适的line-height值。在这种特定情况下，line-height: 0.82将删除大致相同的大写字母A-Z之间的间距（但是它们上的任何变音符号，如É或Å，将被切除）并且会减小基线以下的间距（但是如果字母有下划线，如“j”或“þ”，则它们将被部分切断。）

在浏览器中，字体渲染差异（如非抗锯齿与否）可能会影响像素完美度。