logo标签列表

如何计算排版中CSS字间距(letter-spacing)和"tracking"的区别？

htmlcss
76

我从一位图形设计师那里得到了一个指定一些元素的“track 100”布局的指示。在CSS中，“letter-spacing”是“tracking”的等效属性。

如果给定了"tracking"的值，如何将其表示为像素值的CSS属性？

字距（letter-spacing）可以安全地用 em 表示。 - Ignacio Segura
4个回答
69

你必须使用像素吗？我找到的转换方法是，跟踪值为1000等于CSS中的1em，所以在你的情况下，跟踪100应该是0.1em。

编辑

要从EM转换成像素，请使用这个网站 PXtoEM.com。对于你的特定情况，0.1em转换为2px。然而，这是基于16pt字体大小的，所以你需要根据你正在使用的特定字体大小进行调整。

1
CSS中的所有内容都是以像素为单位的。 - Diodeus - James MacFarlane
@Diodeus：为什么不使用相对大小呢？访问者可以放大或缩小网页，因此为什么不使用相对大小呢？ - Marcel Korpel
6
在这种情况下使用像素的问题在于以下几点：假设你使用了标准大小的字体（即没有改变文字大小），然后将字间距设置为10像素，看起来很好，不是吗？但如果现在将字体大小增加三倍，10像素的字间距会使所有字母挤在一起。因此，在页面中每次更改字体大小时都需要指定新的字间距，而使用相对尺寸的“EM”单位可以让您为站点上的所有字体指定一个字间距，并根据所应用的字体大小自动调整字间距。 - Alex Larzelere
2
为什么？因为我可以在 Photoshop 中查看艺术品并轻松地以像素为单位测量物体。我理解你提出的跟踪/缩放问题，但我仍然需要解决现有的问题。 - Diodeus - James MacFarlane
这不是完全准确的。许多字体使用比1000更高的EM单位。需要确认EM单位（使用像FontForge这样的应用程序），否则除以1000的计算可能会误导。 - inspirednz
34

简短总结：将跟踪值除以1000并使用em单位。

letter-spacing会始终应用于文本，因此我们应该使用相对长度单位。由于font-size可能会被用户或级联更改，所以em单元是文本的最佳长度单位。

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

为什么跟踪值不同？

排版应用程序（例如Adobe的Photoshop、Illustrator和InDesign）在其跟踪中使用em，但操作该单位使其更容易让设计师处理。为了使它更容易，他们将其乘以1000。

Indesign Tooltip: Tracking (in thousandths of an em

将跟踪值转换回整个em

要做到这一点，我们只需要将跟踪数字除以1000，将单位转换回CSS可使用的完整em。

因此，50/1000 = 0.05em。

在CSS/SCSS中计算

如果您正在使用SCSS并希望获得可重用解决方案-这里是一个mixin。

// 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. 如果用户更改其文本大小，则您网站的设计将无法按预期显示，甚至可能无法阅读。

此外，浏览器对于文本的呈现方式与图形设计程序不同，因此在实现方案进行审查时，设计师可能会调整跟踪/字间距。

谢谢，这非常有帮助。你看过Malkalvak关于使用不同EM单位的字体的答案吗？这引出了一个问题，Adobe应用程序是否通常使用1000作为单位，还是使用相关字体的EM单位。如果后者是真的，那么公式并不总是除以1000。它将根据字体而变化。然而，我不知道Adobe是否锁定了1000作为乘数，或者他们是否从字体本身派生乘数。 - inspirednz
17

跟踪转化CSS中的“letter-spacing”

1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em
4
你是如何得到这些数字的？你有这个数据来源吗？ - Jake Wilson
2
大多数情况下，上面的答案足够准确，但使用的1000假定您的字体的Em大小为1000，而这并不总是正确的。我见过Em大小为1024的字体，甚至有2048的，这显然会产生影响。
您可以通过在Font Forge等软件中打开字体，然后选择元素->字体信息菜单项，以及常规选项卡来找到字体的Em大小。
感谢您指出这一点。经过在FontForge中检查后，我发现我正在处理的网站开发所需的设计师规定每个EM有2000个单位。我之前根据许多网站提到的1000个单位进行了所有转换。 - inspirednz
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接