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

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")并测量下行部分底部与红线之间的间距.

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

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