如何计算字体排版中的CSS字母间距v.s.“跟踪”?

如果您使用的是 scss and want a reusable solution-here is a mixin.

将Illustrator、InDesign和Photoshop跟踪转换为字母间距。 @功能跟踪($target){ @回报($target/1000)*1百万; } @混音跟踪($target){ 字母间距:跟踪($target); } < /代码>

要使用上述功能,您只需执行此操作即可。

。示例{
@包括跟踪(50);
}
< /代码> 

或者,你也可以不使用mixin就直接进行数学内联,这样它就不那么抽象了:

。示例{
字母间距:(50/1000)em;
}
< /代码> 

上述示例的输出将是:。


。示例{
字母间距:0.05em;
}
< /代码> 

注:
不应使用基于像素的值,因为像素是固定的,并且在以下情况下中断:



设计器更改字体大小。你需要重新计算
该值。

如果用户更改了文本大小,您的网站设计将不会显示
如需阅读,甚至难以辨认。



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

o文本,所以我们应该使用相对长度单位。ASfont-size可以由用户更改,甚至可以通过级联更改。

这个最好的文本的长度单位是相对长度单位单位。


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


为什么跟踪不同?

布局应用程序,如Adobe的Photoshop、Illustrator和InDesign的使用相对长度单位在跟踪中,但要操纵装置,这样设计师就可以更容易地使用它了。让他们更容易时代1000点。



将跟踪转换回整体相对长度单位的

要做到这一点,我们只需要将跟踪数除以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;
}


注:
在以下情况下,不应使用基于像素的值,因为像素是固定的并中断的:


设计器更改字体大小。你需要重新计算
价值。
如果用户更改了文本大小,您的网站设计将不会显示
读不清,读不清。


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