css - 如何在 Photoshop 中测量/转换 CSS 文本边距/填充？

Question

如何从 Photoshop 获取 CSS 文本边距/填充？

或

如何将 Photoshop 中文本的距离转换为 CSS 边距/填充？

Photoshop 中文本元素(段落)的距离与 CSS 中的边距/填充不对应。例如，使用智能指南测量距离:

都是因为在距离计算中没有使用行高。因此，我找到的第一个建议是使用公式:

margin_in_CSS = distance_in_PS - (line-height - font-size) / 2

或更短:

CSS = PS - (line-height - font-size) / 2

这是一些明显的边框(线)到文本元素的距离。对于两个段落之间的距离我们分别使用:

CSS = PS - (line-height_1 - font-size_1) / 2 - (line-height_2 - font-size_2) / 2

随着字体大小的增加，很明显这个公式是不够的。 Photoshop 中线条的实际高度(通过选择工具获得)甚至小于字体大小 !

虽然 photoshop 仍然认为元素的高度大约等于字体大小，但这并不影响到它的距离:(。例如，在“属性”选项卡上:

我计算了一下，线的实际高度和字体大小之间的差异在顶部大约是30%或者15%和文本的底部(我并不是说这是 100% 正确的!)。现在我使用公式:

CSS = PS - (0.15 * font-size + (line-height - font-size) / 2)

或者两段之间:

CSS = PS - (0.15 * font-size_1 + (line-height_1 - font-size_1) / 2)
         - (0.15 * font-size_2 + (line-height_2 - font-size_2) / 2)

同样，我们也不能依赖Photoshop对几行段落高度的正确定义。但这里的情况更简单，段落在 CSS 中的真实高度将是:

height = line-height * num_of_lines

问题是，有没有更简单的方法？ О_о

抱歉我的英语不好^_^

---

更新，更短的公式:

文字<>边框

CSS = PS - (line-height - 0.7 * font-size) / 2

文本 <> 文本

CSS = PS - (line-height_1 - 0.7 * font-size_1) / 2
         - (line-height_2 - 0.7 * font-size_2) / 2

---

更新:

现在正在开发用于在 Adob​​e 论坛 (link) 上正确计算距离的脚本。目前，脚本可以计算与标准(自动)行高为 120% 的文本行边界框的距离。

---

更新:

不管你用的是尖头文字还是段落文字，结果bounding box height不等于text line-height(leading)

Answer 1

How to convert the distance from/to the text in Photoshop into CSS margin/padding?

文本的实际结果字形(图像中的粉红色边框)将具有不同的高度，内容如下:

• ”
• [空格] = 完全没有字形
• ...
• 一个
• 一个
• QQ
• 问

边距和填充不应从文本本身测量，而是从文本行的边界(或 CSS 中的 line-height ).

在上面的例子中:

65px是文本行的实际高度(或者CSS中的line-height)，(文本换行时到两条文本基线的距离)以及使用的是什么计算边距/填充时。最终结果是，无论文本元素的内容如何，​​基于 line-height，(底部)margin<，从它的基线到它后面的元素的距离应该保持不变 和(底部)padding(当然，还有下一个元素的上边距和填充)。

简而言之，PS 不会减少边距。只是它们不是根据文本字形的边界框计算的(可能因内容而异)，但来自文本行的边界框。

从 .psd 转换为 HTML 时要考虑的另一件事是，在 HTML 中你有 collapsing margins .简而言之，从两个垂直相邻的边距中，将只保留最大的一个。如果另一个为负数，则从正数中减去，如果两者均为负数，则应用具有最大值的那个。