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

74

我从图形设计师那里得到了一些布局的说明，该布局为某些元素指定了“ track 100”。在CSSletter-spacing中，“跟踪”的等效属性。

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

html css

— 狄奥多斯-詹姆斯·麦克法兰
source

中继（字母间距）可以安全地用ems表示。

— 伊格纳西奥·塞古拉

67

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

编辑

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

— 亚历克斯·拉泽雷尔（Alex Larzelere）
source

1

CSS中的其他所有内容均以像素为单位。

— Diodeus-James MacFarlane'5

@Diodeus：为什么？访问者可以放大或缩小网页，为什么不使用相对大小？

— 马塞尔·科佩尔

6

@Diodeus：这是在这种情况下使用像素的问题。假设您有一个标准大小的字体（因此您未对文本大小进行任何更改）。现在给它一个10px的跟踪。看起来不错吧？现在，让我们将字体大小增加三倍，即10px跟踪将所有字母挤在一起。现在，您必须为页面中的每个尺寸更改指定一个新的跟踪，在此情况下，使用EM进行相对大小调整可以为网站上的所有字体指定一个跟踪，并且它将根据页面大小进行调整。应用的字体。

— Alex Larzelere

2

为什么？因为我可以在Photoshop中查看图稿并轻松地以像素为单位进行测量。我对您的跟踪/缩放问题很了解，但是我仍然需要解决该问题。

— Diodeus-詹姆斯·麦克法兰（James MacFarlane），2010年

这并不完全准确。许多字体使用每个EM的单位要多于1000。需要确定每个EM的单位（使用诸如FontForge之类的应用程序），否则该1000分母的计算可能会产生误导。

— 启发

32

TL; DR：将跟踪结果除以1000，然后使用em的

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

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

该单位表示计算出的元素的字体大小。如果在font-size属性本身上使用，它表示元素的继承的font-size。 CSS长度-Mozilla开发人员网络

为什么跟踪有所不同？

诸如Adobe的Photoshop，Illustrator和InDesign之类的布局应用程序em在跟踪中使用，但是可以操纵单元，因此对于设计师来说，这是一个更容易使用的数字。为了更方便他们的时间由1000它。

将跟踪转换回整体 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;
}

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

设计者更改字体大小。您将需要重新计算该值。
如果用户更改其文字大小，则您的网站设计将不会显示出来，甚至无法阅读。

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

— 诺兰
source

谢谢，这是非常有帮助的。您是否看到每个EM使用不同单位的Malkalvak的答案字体？这成为必然，adobe应用程序理所当然地使用1000，或者它们使用所涉及字体的每em单位。如果后者是正确的，则公式将不会总是被1000除以。它会根据字体而有所不同。但是，我不知道Adobe是否将1000锁定为乘法器，或者他们是否从字体本身派生了乘法器。

— 启发

17

跟踪转化CSS“字母间距”

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

— xeth23
source

4

您是怎么得到这些数字的？你有这个来源吗？

— 杰克·威尔逊

2

在很大程度上，上述答案足够准确，但是，所使用的1000假定您的字体的Em大小为1000，但并非总是如此。我见过Em大小为1024的字体，甚至有2048的字体，这显然会产生影响。

您可以通过在Font Forge之类的东西中打开字体，然后选择Elements-> Font Info菜单项和General选项卡来找到一种字体的Em Size 。

— 马尔卡列瓦克
source

感谢您指出了这一点。在检查了FontForge之后，恰好发生了我正在从事的Web开发的设计师规范，每个EM有2000个单元。我已经根据在许多网站上提到的1000个单位进行了所有转换，以完成此类工作。

— 启发