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

Question

我从图形设计师处获得了一些布局的说明，该布局为某些元素指定了“轨道100”。在CSS中letter-spacing是“跟踪”的等效属性。

给定跟踪值，如何将其表示为CSS的值（以像素为单位）？

Answer 1

你必须使用像素吗？我发现的转换是1000的跟踪值等于1 em，所以在你的情况下跟踪100应该是0.1 em。

修改的

要从EM转到像素，请使用此网站PXtoEM.com。对于您的特定情况，0.1 em转换为2px。但是这是基于16pt字体，因此您必须根据您使用的特定字体大小进行调整。

Answer 2

TL; DR：将跟踪除以1000并使用em的

关于letter-spacing的一些背景总是应用于文本，因此我们应该使用相对长度单位。由于font-size可以由用户更改，甚至可以通过级联更改。

文字长度的最佳单位为em单位。

  

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

为何跟踪不同？

Adob​​e的Photoshop，Illustrator和InDesign等布局应用程序在跟踪时会使用em，但操纵单位会让设计师更容易使用。为了方便他们次它1000。

将追踪转换回整个em

要做到这一点，我们只需要将跟踪数除以1000即可将单位恢复为CSS可以使用的整个em。

所以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);
}

或者你可以在没有mixin的情况下对数学进行内联，这样就不那么抽象了：

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

以上示例的输出将为：

.example {
  letter-spacing: 0.05em;
}

注意： 您不应该使用基于像素的值，因为像素是固定的并在以下情况下中断：

1. 设计师更改字体大小。你需要重新计算 价值。

2. 如果用户更改其文字大小，则不会显示您的网站设计 根据需要，甚至难以阅读。

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

Answer 3

跟踪转化CSS“字母间距”

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

Answer 4

在大多数情况下，上述答案都足够准确，但是，使用的1000个假定您的字体的Em大小为1000，并且情况并非总是如此。我看过Em大小为1024的字体，有些甚至是2048，这显然会产生影响。

您可以通过在Font Forge之类的内容中打开字体来查找字体的大小，然后选择元素 - ＆gt; “字体信息”菜单项和“常规”选项卡。

Answer 5

如果字体大小以像素为单位，则可以使用以下公式：

tracking * font-size / 1000 = letter-spacing