☰

如何从 psd 文件中计算“行高”？

tag-icon • tag-icon adobe-photoshop html css photoshop-cs5
如何从 psd 文件中计算“行高”？

我有一个 .PSD，我正在尝试将其转换为 HTML/CSS。

我无法从 .PSD 计算 CSS 中的行高。

我如何从行距计算行高？

答案1

在此处输入图片描述Photoshop 使用行距来测量行高，这与 CSS 行高不同。行距是一行文本底部与其下方文本行顶部之间的距离。行高是行上方行距的一半与其下方行距的一半之间的距离。

要将行距转换为行高：字体大小 + (行距 / 2) = 行高。

例如，如果 Photoshop 中的字体大小为 10px，行距为 18px，则行高为 19px...

fontsize + (leading / 2) = lineheight
  10     +   (18 / 2)    = ?
  10     +      9        = ?
                         = 19

如果 Photoshop 中没有设置行距值，则为字体大小的 120%，或者只是

line-height: 1.2;

此外，还要计算 PSD 中显示的适当的 CSS 字母间距。

将字母间距值除以 1000。例如，如果值为 20，则等式为 20 / 1000 = 0.02

现在字母间距为 0.02em

答案2

最简单的解决方案是选择文本层，右键单击它并选择“复制 CSS”。将其粘贴到记事本或其他程序中，然后从中读取值 :)

答案3

你说的是 .PSD，所以我假设你正在使用 Photoshop。在 Photoshop 中，你可以打开标尺来获取像素高度。

或者，使用屏幕标尺（在 Google 上搜索“屏幕标尺”）获取像素高度。然后，在 CSS 中尝试不同的高度，如果必须精确，则使用屏幕标尺进行测量。

相关内容