我目前正在从 PSD 构建网站。大多数字体的字母跟踪为-25（<- AV->：我猜这是字母间距的符号？）。
我如何在 CSS 中获得相同的效果？我知道该属性是letter-spacing: X，但它不需要百分比，-25px 或 pts 将是一个巨大的数字！
问问题
18250 次
4 回答
25
在 Photoshop 中，字母间距称为字母跟踪，特别是每个文本字母之间的间距。问题是 Photoshop 字母跟踪不会将 1:1 转换为 CSS 中的字母间距。
不过，计算从 Photoshop 到 CSS 的转换非常容易。
将 Photoshop 字母跟踪转换为 CSS 字母间距的公式
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。
于 2014-09-15T02:30:48.770 回答
10
您可以使用em尺寸而不是px，从而调整相对于字体大小的间距（因此 Photoshop 的 25% 大约是.25em）。
于 2012-11-22T09:47:14.170 回答
8
在这种情况下，无单位数字通常意味着印刷单位是该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 的渲染机制与浏览器不同。
于 2012-11-22T11:00:54.737 回答
2
如果您的问题只是单位转换，您可以使用em而不是px
虽然em允许十进制数字，但它不会改变渲染精度。0.5px或同等精度不会在浏览器上显示 - 它将变为 0 或 1px。仅仅因为屏幕不能显示半个像素，它充其量只能通过抗锯齿来近似。
对于较小的字体，抗锯齿可能看起来比间距更差。另一种选择是查找默认具有所需间距的网络字体。这样，您将获得与您想要的相似的结果，但可能意味着更改字体。
CSS 间距根本不如 Photoshop 准确。一个原因是 Photoshop 也可以渲染打印 - 使用屏幕/像素分辨率，您必须忍受像素精度。尽管从理论上讲，字母间距在缩放等方面变得更加准确是可能的，但我不知道任何实际可以以这种方式工作的实现。
如果正确的字母间距对您来说真的很重要，您可以尝试使用 SIFR 以比浏览器的能力更准确地呈现字体间距 - 他们可能能够使用更改抗锯齿。显然，这只有在字母间距是一个大问题时才有意义。
于 2012-11-22T10:03:17.710 回答