html - 了解 CSS 字母间距 : is it valid to replace the default value of normal with 0?

Question

根据 this page , CSS letter-spacing 属性的默认值为 normal。

值得注意的是，非默认值被添加到默认值:

The most important point to note when using letter-spacing is that the value specified does not change the default, it is added to the default spacing the browser applies (based on the font metrics). letter-spacing also supports negative values, which will tighten the appearance of text, rather than loosening it.

根据这个定义，0 应该等同于默认值 normal，因为 0 + X = X。

1) 使用 0 代替默认值 normal 是否有效？ (这是针对 slider 实现的。)

2) 为什么 0 不是默认值？为什么引入另一个值(即正常)？

This test on CodePen还表明 0 的值确实等同于默认值 normal。

.loose {
  letter-spacing: 2px;
}

.tight {
  letter-spacing: -1px;
}

.zero {
  letter-spacing: 0;
}

.normal {
  letter-spacing: normal;
}

<p>This type has no additional letter-spacing applied.</p>

<p class="loose">This type is letter-spaced loosely at <code>2px</code>.</p>

<p class="tight">This type is letter-spaced tightly at <code>-1px</code></p>

<p class="zero">This type is letter-spaced at <code>0</code></p>

<p class="normal">This type is letter-spaced at <code>normal</code></p>

Answer 1

不，两者不是完全等价的。如果你检查 the current specification

normal

The spacing is the normal spacing for the current font. This value allows the user agent to alter the space between characters in order to justify text.

然后

<length>

This value indicates inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

在大多数情况下，它们会呈现相同的内容，但如您所见，用户代理不会处理相同的内容。

---

the Draft of the next level中的定义似乎略有变化，现在两者相同。

For legacy reasons, a computed letter-spacing of zero yields a resolved value (getComputedStyle() return value) of normal..

您也可以在这里阅读:https://github.com/w3c/csswg-drafts/issues/1484

CSS2 used to treat normal different than 0, so computing differently was a requirement. Now that the spec treats them the same ...

---

我不知道是否所有的浏览器都已经实现了这个级别，但你很可能认为它们是一样的