Html 如何计算排版中的 CSS 字母间距与“跟踪”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2760784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to calculate CSS letter-spacing v.s. "tracking" in typography?
提问by Diodeus - James MacFarlane
I have instructions from a graphic designer for a layout that specifies "track 100" for some elements. In CSS letter-spacingis the equivalent property for "tracking".
我从图形设计师那里得到了布局说明，该布局为某些元素指定了“轨道 100”。在 CSS 中letter-spacing是“跟踪”的等效属性。
Given a value for tracking, how do you express this as a value for CSS in pixels?
给定一个跟踪值，您如何将其表示为以像素为单位的 CSS 值？
采纳答案by Alex Larzelere
Do you have to use pixels? The conversions I found is a tracking value of 1000 is equal to 1 em in CSS, so in your case tracking 100 should be 0.1 em.
你必须使用像素吗？我发现的转化是 1000 的跟踪值等于 CSS 中的 1 em，因此在您的情况下，跟踪 100 应该是 0.1 em。
EDIT
编辑
To go from EM to pixels use this site PXtoEM.com. For your specific case 0.1 em converts to 2px. However this is based on a 16pt font, so you will have to adjust for the specific font size you're using.
要从 EM 到像素，请使用本网站PXtoEM.com。对于您的特定情况，0.1 em 转换为 2px。但是，这是基于 16pt 字体，因此您必须针对您使用的特定字体大小进行调整。
回答by jnowland
TL;DR: divide the tracking by 1000 and use em's
TL;DR：将跟踪除以 1000 并使用em's
A bit of background about letter-spacingis always applied to text so we should use a relative unit of length. As font-sizecan change by the user or even by cascade.
一些关于背景的内容letter-spacing总是应用于文本，所以我们应该使用相对长度单位。由于font-size可以由用户甚至通过级联改变。
The bestunit of length for text is the emunit.
文本的最佳长度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
该单位表示元素的计算字体大小。如果在 font-size 属性本身上使用，它表示元素的继承字体大小。 CSS 长度 - Mozilla 开发者网络
Why is tracking different?
为什么跟踪不同？
Layout apps such as Adobe's Photoshop, Illustrator and InDesign use em's in their tracking but manipulate the unit so it's an easier number for designers to play with. To make it easier they timesit by 1000.
Adobe 的 Photoshop、Illustrator 和 InDesign 等布局应用程序em在其跟踪中使用's，但会操纵该单位，因此对于设计师来说，这是一个更容易使用的数字。为了更方便他们的时间由1000它。
Converting tracking back to whole em's
转换跟踪回整em的
To do this we just need to divide the tracking number by 1000 to get the unit back to a whole em that CSS can use.
为此，我们只需要将跟踪号除以 1000 即可将单位恢复为 CSS 可以使用的整个 em。
So 50/1000 = 0.05em.
所以50/1000 = 0.05em。
Calculating this in CSS/SCSS
在 CSS/SCSS 中计算
If you are using SCSSand want a reusable solution - here is a mixin.
如果您正在使用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 );
}
To use the above functions you can just do this.
要使用上述功能，您可以这样做。
.example {
@include tracking(50);
}
Alternatively you can just to the maths inline without a mixin so it's less abstracted:
或者，您可以在没有 mixin 的情况下直接进行数学内联，因此它不那么抽象：
.example{
letter-spacing: #{(50/1000)}em;
}
The output for the above examples will be:
上述示例的输出将是：
.example {
letter-spacing: 0.05em;
}
Note:You should not use a pixel based value as pixels are fixed and break when:
注意：您不应该使用基于像素的值，因为在以下情况下像素是固定的并且会中断：
The designer changes the font-size. You would need to recalculate the value.
If the user changes their text size your sites design won't appear as desired or even illegible to read.
设计器更改字体大小。您需要重新计算该值。
如果用户更改了他们的文本大小，您的网站设计将不会按预期显示，甚至难以辨认。
Additionally browsers render text different to how the graphic design programs do so don't be surprised if the designer tweaks the tracking/letter-spacing on review of the implementation.
此外，浏览器呈现的文本与图形设计程序的方式不同，因此如果设计人员在实施时调整跟踪/字母间距，请不要感到惊讶。
回答by xeth23
Tracking Conversion CSS “letter-spacing”
跟踪转换 CSS“字母间距”
1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em
回答by Malcalevak
For the most part the above answers are accurate enough, however, the 1000 that's being used assumes your font has an Em Size of 1000, and that's not always the case. I've seen fonts that have an Em Size of 1024, and some that were even 2048, which is obviously going to have an impact.
在大多数情况下，上述答案足够准确，但是，所使用的 1000 假定您的字体的 Em 大小为 1000，但情况并非总是如此。我见过 Em 大小为 1024 的字体，有些甚至是 2048，这显然会产生影响。
You can find out a font's Em Size by opening it inside of something like Font Forgeand then selecting the Elements -> Font Info menu item, and the General tab.
您可以通过在Font Forge 之类的东西中打开它，然后选择 Elements -> Font Info 菜单项和 General 选项卡来找出字体的 Em Size 。
回答by stickyuser
If you have a font size in pixels you can use the following formula:
如果您有以像素为单位的字体大小，则可以使用以下公式：
tracking* font-size/ 1000 = letter-spacing
tracking* font-size/ 1000 =letter-spacing
