将Photoshop中设置的字母跟踪值转换为CSS中的等效字母间距

Question

我目前正在建立一个PSD网站.大多数字体的字母跟踪为-25(<- AV->:我猜这是字母间距的符号？).

我如何在CSS中获得相同的效果？我知道这个属性letter-spacing: X但它没有占用百分比,-25px或pts将是一个巨大的数字!

Answer 1

在Photoshop中,字母间距称为字母跟踪,特别是每个文本字母之间的空格.问题是Photoshop Letter Tracking不会将1:1转换为CSS中的Letter Spacing.

但是,计算从Photoshop到CSS的转换非常容易.

将Photoshop Letter跟踪转换为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.

Answer 2

您可以使用em尺寸而不是尺寸px,从而调整相对于字体大小的间距(因此,Photoshop的25%就在某处.25em).

Answer 3

在这样的背景下,无单位数通常意味着印刷单位只占em单位的一小部分.它通常被称为"单位".此单位的值取决于字体,它表示为UPM(每个单位的单位)值.常见的UPM值为1,000,但Microsoft字体的值为2,048,其他值也会出现.(这个问题在文章UPM值1000的石头中有详细描述？)

假设UPM值为1,000,-25将映射到-0.025em.设置letter-spacing: -0.025em往往具有相当小的影响:较长的文本行变得大约一个"i".使用CSS获得的效果不应与PhotoShop相同; PhotoShop的渲染机制与浏览器的渲染机制不同.