编码像素完美设计时如何处理行高 [英] How to deal with line-height while coding a pixel perfect design

问题描述

这是我制作的示例设计的屏幕截图：

Here is a screenshot of the example design I made up:

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

There is a 10px space between the bottom of the letters and the red line. I'm trying to replicate this with the following code:

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

从技术上讲，这段代码应该给我我想要的东西。但事实并非如此。这是在Chrome中运行的屏幕截图：

Technically, this code should give me exactly what I want. But it doesn't. Here is a screenshot of it in action in Chrome:

由于行高，文本和边框之间有多余的空间。这是在Chrome上检查过的屏幕截图：

Because of the line height, there's extra space between the text and the border. Here's an inspected screenshot on Chrome:

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

When I take my time and measure the space under the letters that's being caused by line height, I can see it's a 9px of empty area. So, to get 10px of space between the text and the border I need to change my code to:

padding-bottom: 1px;

对此的解决方案可能是在行高度属性中添加文本的确切高度设计文件。但是，如果文本包含多行，就会搞砸了。

A solution to this might be adding a line-height property with amount of the text's exact height in the design file. But then, it'll mess up if the text includes multiple lines.

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

What is the best approach here to accomplish the pixel perfect design conversion?

推荐答案

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

In HTML, there is no way to specify the spacing between the text baseline and the border. To understand this, see this picture:

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

The height of HTML text always includes both the ascender area and the descender area, even in cases when there are no letters with a descender or an ascender. Therefore the real distance between the bottom of the text and the border in your example is not 10px.

要获得距文本底部正确的距离（以像素为单位），请更改文本，使其包含一个带有降序的字母（例如Hellp，Worly），并测量降序的底部与红线之间的间距。

To get the correct distance from the bottom of text in pixels, change the text so that it contains a letter with a descender (e.g. Hellp, Worly") and measure the space between the bottoms of descenders and the red line.

如果正在尝试重新创建图片并且无法更改文本，使用绘图应用程序（例如Inkscape）测量所用字体的文本高度/点大小的比率，然后计算距离如下：

Alternatively, if you are trying to recreate a picture and can't change the text, measure the ratio text height / point size of the used font using a drawing application (e.g. Inkscape), then calculate the distance as follows:

css距离=基线距离-（点大小*（1-比率））

这篇关于编码像素完美设计时如何处理行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！