将Photoshop中的字母跟踪值集转换为CSS中相应的字母间距

Question

我目前正在根据 PSD 设计图建立一个网站。大多数字体都有 -25 的字母跟踪（<- AV->：我猜这是字母间距的符号？）

我该如何在 CSS 中实现相同的效果？我知道属性是 letter-spacing: X，但它不接受百分比，而 -25px 或 pt 将是一个巨大的数字！

- Rick Donohoe

---

可能是如何在排版中计算CSS字间距与“追踪”？的重复问题。 - davidcondrey

Answer 1

在Photoshop中，字母间距被称为字跟踪（Letter-tracking），它特指文本中每个字母之间的空间。问题是，Photoshop中的Letter Tracking与CSS中的Letter Spacing没有1:1的转换。

不过，从Photoshop到CSS的转换非常容易计算。

将Photoshop Letter Tracking转换为CSS Letter-spacing的公式

em公式

    X / 1000 = Y

X is the value of the letter-tracking in Photoshop
Y is the value in "em" to use in CSS

示例

考虑以下示例：Photoshop具有字母跟踪值为200。

200 / 1000 = 0.2

结果在CSS中是0.2em。

px 公式

如果您更喜欢使用“px”值，则公式为

    X * S / 1000 = P

X is equal to the letter-tracking value in Photoshop
S is the font-size in pixels
P is the resulted value in "px" to use in CSS

例子

考虑下面的例子：Photoshop 的字母间距值为 200，字号值为 10。

200 * 10 / 1000 = 2

CSS中的结果为2px。

- davidcondrey

Answer 2

您可以使用em维度代替px，从而使间距相对于字体大小调整大小（因此Photoshop的25％大约是.25em）。

- onon15

---

如果您不想进行数学计算，也想将Photoshop转换为px或em，请查看此工具。它可以为您完成这项工作：https://benmarshall.me/convert-photoshop-letter-spacing-to-css/ - Ben Marshall

Answer 3

在这种情况下，无单位的数字通常意味着排版单位是em单位的一小部分。它通常被称为“单位”。此单位的值取决于字体，并且表示为UPM（每个em单位）。常见的UPM值为1,000，但Microsoft字体为2,048，也会出现其他值。（该问题在文章UPM value of 1000 set in stone?中有详细描述）

假设UPM值为1,000，则-25将映射到-0.025em。设置letter-spacing: -0.025em往往效果较小：一个较长的文本行变短了一个“i”的长度。使用CSS获得的效果不应与PhotoShop相同；PhotoShop的呈现机制与浏览器不同。

- Jukka K. Korpela

---

这个答案的原始版本是正确的： “假设UPM值为1,000，-25将映射到-0.025em。” - Daghall

@Daghall，没错。我不知道为什么在添加“em”单位时改变了数字。 - Jukka K. Korpela

Answer 4

如果你的问题只是单位转换，你可以使用em代替px。

虽然em允许使用小数，但它并不改变渲染精度。浏览器不会显示0.5px或相当精度 - 它将变成0或1px。这是因为屏幕无法显示半个像素，最多只能通过抗锯齿来近似显示。对于较小的字体，抗锯齿可能看起来比间距更糟糕。另一个选择是找到一个具有默认所需间距的Web字体。这样，您就可以获得类似于您想要的结果，但可能需要更改字体。

CSS间距与Photoshop相比简直不够准确。其中一个原因是Photoshop还用于打印 - 在屏幕/像素分辨率下，您必须接受像素精度。尽管理论上可以通过字母间距实现缩放等更精确的效果，但我不知道是否有任何实际工作的实现方式。

如果正确的字母间距对您非常重要，您可以尝试使用SIFR以比浏览器更精确地呈现字体间距 - 他们可能能够使用可变抗锯齿。显然，只有当字母间距是一个大问题时，这才有意义。

- Marcus