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

【问题标题】：How to calculate Photoshop letter spacing in css px or rem?如何以 css px 或 rem 计算 Photoshop 字母间距？
【发布时间】：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
}

【讨论】：