如何计算CSS letter-spacing v.s. “tracking”在排版中？

问题描述

我有一个图形设计师的指令，用于为某些元素指定 “track 100” 的布局。在 CSS 中 letter-spacing 是”tracking” 的等效属性。

给定一个跟踪的值，你如何将它表示为 CSS 的像素值？

最佳解决方案

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

编辑

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

次佳解决方案

跟踪转换 CSS “letter-spacing”

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

第三种解决方案

长话短说：将跟踪除以 1000，并使用 em

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

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

This unit represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element. CSS Lengths – Mozilla Developer Network

为什么跟踪不一样？

Adobe 的 Photoshop，Illustrator 和 InDesign 等布局应用程序使用 em 进行跟踪，但操作该单元，这对于设计人员来说更容易。为了使它更容易，它们可以 1000 次。

将跟踪转换回整个 em

为了做到这一点，我们只需要将跟踪号码除以 1000 即可将该设备重新整合到 CSS 中。

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

或者，您可以只是内联数学，而不用混合，所以它不太抽象：

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

上述示例的输出将是：

.example {
  letter-spacing: 0.05em;
}

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

设计师改变了 font-size 。您需要重新计算该值。
如果用户更改其文字大小，您的网站设计将不会根据需要显示，甚至难以辨认。

另外，浏览器渲染文本不同于图形设计程序如何做，如果设计师调整跟踪/letter-spacing 的执行情况，不要感到惊讶。

参考文献

How to calculate CSS letter-spacing v.s. “tracking” in typography?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何计算 CSS letter-spacing v.s. “tracking” 在排版中？