如何计算CSS字母间距与印刷术中的“跟踪”？
我有一个平面devise师的指示，指定一些元素的“轨迹100”的布局。 在CSS中， letter-spacing是“跟踪”的等效属性。
给定一个跟踪值，你如何表示这是CSS的像素值？
你必须使用像素？ 我发现的转换跟踪值1000等于CSS中的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
TL; DR：将跟踪分为1000，并使用em
关于letter-spacing的一些背景总是应用于文本，所以我们应该使用长度的相对单位。 font-size可以由用户或甚至级联来改变。
文本的最佳长度单位是em单位。
这个单位表示元素的计算字体大小。 如果在font-size属性本身上使用，则表示元素的inheritance字体大小。 CSS长度 – Mozilla开发者networking
为什么追踪不同？
布局应用程序（如Adobe的Photoshop，Illustrator和InDesign）使用em进行跟踪，但是操作该设备，因此devise人员可以轻松使用该设备。 为了使它更容易，他们乘以 1000。
将跟踪转换回整个em
要做到这一点，我们只需要将跟踪编号除以1000即可使单位回到CSS可以使用的整个时间。
所以50/1000 = 0.05em 。
在CSS / SCSS中计算
如果你正在使用SCSS，并希望有一个可重用的解决scheme – 这里是一个混合。
// Convert illustrator, indesign and photoshop tracking into letter spacing. @function tracking( $target ){ @return ($target / 1000) * 1em; } @mixin tracking( $target ){ letter-spacing: tracking( $target ); }
要使用上述function，你可以这样做。
.example { @include tracking(50); }
或者，你可以不用混合就可以内联math，所以抽象性较差：
.example{ letter-spacing: #{(50/1000)}em; }
上述例子的输出将是：
.example { letter-spacing: 0.05em; }
注意：不应使用基于像素的值，因为像素是固定的，并在下列情况下中断：
-
devise师改变字体大小。 您将需要重新计算价值。
-
如果用户改变他们的文字大小，您的网站devise将不会像预期的那样出现，甚至看不清楚。
另外，浏览器呈现的文本与graphicsdevise程序的不同之处是不一样的，如果devise师在审查实现时调整跟踪/字母间距，那么不会感到惊讶。
大多数情况下，上面的答案是足够准确的，但是，正在使用的1000则假定您的字体的Em尺寸为1000，事实并非总是如此。 我已经看到了Em Size为1024的字体，有些甚至是2048，这显然会产生影响。
您可以通过在Font Forge之类的内容中打开字体 ，然后selectElements – > Font Info菜单项和General选项卡来查找字体的Em Size。
