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

Question

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

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

如何从领先计算行高？

Answer 1

Photoshop 使用前导测量行高，这与 CSS 行高不同。行距是文本行底部与其下方文本行顶部之间的距离。行高是一条线上方前导的一半与其下方前导的一半之间的距离。

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

例如，如果 Photoshop 中的字体大小为 10 像素，前导为 18 像素，则行高为 19 像素...

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

Answer 2

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

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