如何计算 CSS 字母间距与排版的“跟踪”？

小开

最佳答案

你一定要用像素吗？我发现转换的跟踪值1000在 CSS 中等于1 em，因此在您的示例中跟踪100应该是0.1 em。

剪辑

从 EM 到像素使用这个站点 PXtoEM.com。对于您的特定情况0.1 em 转换为2px。但是，这是基于16 pt 字体，所以您将不得不调整您使用的特定字体大小。

小开

跟踪转换 CSS“字母间距”

1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em

小开

DR: 将跟踪除以1000并使用 em

有关 letter-spacing的一点背景总是应用于文本，所以我们应该使用相对长度单位。因为 font-size可以由用户改变，甚至可以由级联改变。

文本的 最好的长度单位是 em单位。

此单元表示元素的计算字体大小。如果使用在 font-size 属性本身上，它表示继承的元素的 font-size。 CSS 长度-Mozilla Developer Network

为什么跟踪不一样？

像 Adobe 的 Photoshop，Illustrator 和 InDesign 这样的布局应用程序在跟踪时使用了 em，但是操纵了这个单位，这样设计者就可以更容易地使用这个数字。为了让它更容易，他们时间到1000。

转换跟踪回到整个 em的

要做到这一点，我们只需要除以1000的跟踪号码，让单位回到一个完整的 em，CSS 可以使用。

所以 50/1000 = 0.05em。

在 CSS/SCSS 中计算

如果你正在使用 SCSS并且想要一个可重用的解决方案-这里是一个混合。

// Convert illustrator, indesign and photoshop tracking into letter spacing.


@function tracking( $target ){
@return ($target / 1000) * 1em;
}


@mixin tracking( $target ){
letter-spacing: tracking( $target );
}

要使用上述函数，只需执行以下操作。

.example {
@include tracking(50);
}

或者，你也可以直接使用数学内联，不需要混合，这样就不那么抽象了:

.example{
letter-spacing: #{(50/1000)}em;
}

上述例子的结果如下:

.example {
letter-spacing: 0.05em;
}

注: 不应使用基于像素的值，因为像素是固定的，在下列情况下会中断:

设计器更改字体大小。您需要重新计算值。
如果用户更改其文本大小，网站设计将不会出现根据需要甚至难以阅读

此外，浏览器呈现的文本与图形设计程序呈现的文本不同，因此，如果设计师在审查实现时调整了跟踪/字母间距，不要感到惊讶。

小开

在大多数情况下，上面的答案是足够准确的，但是，1000正在使用假设您的字体有一个1000的 Em 大小，这并不总是如此。我见过有些字体的 Em 大小是1024，有些甚至是2048，这显然会产生影响。

你可以通过在类似 Font Forge的内部打开它，然后选择“元素”> “字体信息”菜单项和“常规”选项卡来查找字体的 Em 大小。