如何计算Photoshop字距的CSS像素（px）或REM？

Question

有人知道如何在CSS中以像素或rem为单位计算Photoshop字间距吗？ 例如：在Photoshop中我设置了140的字间距。 现在，在CSS中应该是多少呢？ 或者有没有使用Sass实现这个的方法？

- Harden Rahul

---

老实说，我通常会彻底测试它，确保我的容器宽度和字体大小与设计图/PSD完全匹配，并密切关注新行开头的单词。.01em 是一个不错的起点。 - admcfajn

@admcfajn 我同意你的观点，但是我们是为客户工作的，他们要求将网站测试到像素级别。在这种情况下，我没有时间每次都进行计算或实验。 - Harden Rahul

我经常用于精确前端工作的另一种技术是找到百分比... 比如说你有font-size: 50px，letter-spacing 3px。3/50 = 0.06。你的psd使用什么单位？你是在问如何从Photoshop导出CSS吗？Sketch是一个更好的程序。它比你想象的要快得多。你不必测试每个单词，psd有多少设计元素？良好的设计会重复出现，因此您可以找到每个样式的基线，并在需要时进行精调。您是否使用预编译器？向其添加一些函数可能会有所帮助。 - admcfajn

@HardenRahul，你最好教给客户PixelPerfect™ Webdesign并不是他们想要的。https://www.brettdev.com/exactly-pixel-perfect-design/ - yunzen

Answer 1

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

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

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

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

- Steve

---

也许你是对的，我也尝试了你的代码，但我发现它并不完全准确，就像在Photoshop中显示的那样。但无论如何，非常感谢你的努力。 - Harden Rahul

@HardenRahul 预计会有些许差异，但并非因为 Steve 的回答不正确（他完全正确），而是由于 Photoshop 和浏览器之间的字体渲染差异。 - Flying

@flying 意味着答案并不完全准确。 - Harden Rahul

更普遍地说，这意味着没有100%准确的答案。 - tobiv