如何在排版中计算CSS字母间距与"跟踪"？

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's

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

文本长度的最佳单位是em单位.

此单位表示元素的计算字体大小.如果在font-size属性本身上使用,则表示元素的继承字体大小. CSS长度 - Mozilla开发者网络

为什么跟踪不同？

Adobe的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