如何以 css px 或 rem 计算 Photoshop 字母间距？

Posted 2023-02-16

【中文标题】如何以 css px 或 rem 计算 Photoshop 字母间距？

【英文标题】：How to calculate Photoshop letter spacing in css px or rem?

【发布时间】：2018-04-09 18:10:09

【问题描述】：

任何人都知道如何以 css px 或 rem 计算 Photoshop 字母间距。 示例：我在 Photoshop 中有 140 个字母间距。 现在，这在 CSS 上应该是什么？ 或者有什么办法可以用 sass 做到这一点？

【问题讨论】：

老实说，我通常只是测试一下，确保我的容器宽度和字体大小与 design-comp/psd 完全匹配并密切关注换行符开始的单词。 .01em 是一个很好的起点。

@admcfajn 我同意你的观点，但是当我们为客户工作时，他们将他们的网站测试为 px 到 px。在那种情况下，我没有时间每次都计算或试验。

另一种我经常用于精确前端工作的技术是找到百分比......假设你有 font-size: 50px, letter-spacing 3px。 3/50 = 0.06。你的psd用的是什么单位？您是在问如何从 Photoshop 中导出 css 吗？ Sketch 是一个更好的程序。你可能想的要快得多。不用每个字都考，psd有多少设计元素？好的设计会重复，因此您可能可以为每种样式找到一个基线，并在需要时在 QA 期间对其进行微调。你在使用预编译器吗？向它抛出一些函数可能会有所帮助。

@HardenRahul 您不妨告诉您的客户 PixelPerfect™ 网页设计不是他们想要的。 brettdev.com/exactly-pixel-perfect-design

【参考方案1】：

将 Photoshop 中的值除以 1000 并将结果设置为 em 会得到像素完美的结果。

例如，假设在 Photoshop 中您的字母间距为 50，则生成的 css 将是 letter-spacing: 0.05em。

创建一个简单的函数来帮助您每次都进行数学运算：

@function letter-spacing($ps-value) 
    @return ($ps-value / 1000) * 1em

【讨论】：

可能你是对的，我也试过你的代码，但我发现它并不那么准确。就像它在 Photoshop 中的视觉效果一样。但一路感谢您的努力。

@HardenRahul 预计不准确，但不是因为史蒂夫的回答（他完全正确），而是因为 Photoshop 和浏览器之间的字体渲染差异。

@flying 这意味着答案并非 100% 准确。

更一般地说，这意味着没有 100% 准确的答案。