css 'ex' 单位的价值是多少？答案

【问题标题】：What is the value of the css 'ex' unit?css 'ex' 单位的价值是多少？
【发布时间】：2010-10-29 10:48:49
【问题描述】：

（不要与流行的 .Net 单元测试库 Xunit 混淆。）

今天无聊的我开始检查 Gmail 的 DOM（是的，我很无聊）。

一切看起来都很简单，直到我注意到关于某些元素宽度的有趣规范。杰出的 Googlites 使用稀有的“前”单位指定了许多表列。

width: 22ex;

起初我很困惑（“什么是'ex'？”），然后我又想起了：我似乎记得几年前我第一次学习 CSS 时的一些事情。 From the CSS3 spec:

[ex 单位 是] 等于 first available font 使用的 x 高度。之所以称为 x 高度，是因为它通常等于小写字母“x”的高度。但是，即使是不包含“x”的字体，也会定义一个“ex”。

很好，很好。但我以前从未真正见过它使用过（更不用说自己使用了）。我经常使用 ems，并欣赏它们的价值，但为什么是“ex”？与 em 相比，它的测量标准似乎要少得多，而且用处也少得多。

我发现讨论这个话题的几页之一是斯蒂芬波利的http://www.xs4all.nl/~sbpoley/webmatters/emex.html。 Stephen 提出了很好的观点，但是，他的讨论对我来说似乎没有结论。

所以我的问题是：“ex”单位对网页设计有何价值？

（这个问题可以被标记为主观的，但我会将这个决定留给比我更有经验的 SO'ers。）

【问题讨论】：

【解决方案1】：

当您想根据文本小写字母的高度调整某些内容时，它很有用。例如，想象一下这样的设计：

在设计的排版维度中，字母的高度与其他元素具有重要的空间关系。上面源图像中的线条旨在帮助指出文本的 x 高度，但它们也显示了围绕该文本进行设计时的指导方针。

正如 Jonathan 在 cmets 中指出的那样，ex 只是 em（宽度）的高度版本。

【讨论】：

只是添加，它的高度相当于使用'em'单位作为宽度
@Joel 对于给定字体，m 的宽度和 x 的高度之间的比率是多少？即使它是固定的，它也可能非常难以计算，因为每种字体在其 m 和 x 之间具有不同且任意的比率。因此，在设计应该与类型相关的元素时，不必自己确定比例，您可以依靠 x 高度来保持比例。
另一个相当深奥的一点是according to Mozilla Gecko 可以使用 exe 比使用 em 更准确地缩放项目。 em 的默认“非样式化”大小是 10.06667px，而 ex 的大小是 6px。这意味着在缩放 em 时，Firefox 必须比缩放 exe 更频繁地舍入部分像素。
@JonathanFingland @RexM 与印刷排版不同，在 CSS 中，em 单位 does not measure a width - 它测量字体的高度。 1 em is the computed font-size value 和 font-size specifies “the desired height of glyphs”。所以em 和ex 都测量高度。（不过，ch 确实测量了宽度。）
RexM：我可以建议简单地将您的答案回滚到您的第一个版本，因为上面的 Rory O'Kane 的评论是完全正确的！唯一可以添加的是 em 和 ex 是相对于父元素的计算字体大小，或者它是 parent.parent 等一直到根元素 html （其中@ 987654337@ 单位是相对的），如果未定义，那么我们最终会使用浏览器的默认值（通常为 16px/12pt）也许@JonathanFingland 可以删除该评论（以免混淆未来的读者）？

【解决方案2】：

要回答这个问题，一种用法是使用上标和下标。示例：

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}

【讨论】：

不过，我认为这并不能真正帮助解释什么是“前任”。
问题是“'ex'单位对网页设计有什么价值？”。不是“什么是前单位？” Joel 在原始问题中定义前单位方面做得非常好。我提供了一个实际示例，说明如何使用它来定位上标。
直接回答问题的好例子。干得好。

【解决方案3】：

这里要考虑的另一件事是当用户增大或减小其字体大小时您的页面如何缩放（可能使用 ctrl+鼠标滚轮 (windows)）。

我用 em 和.. 左填充：2 em； padding-right: 2 em;

和前 padding-bottom: 2 ex; padding-top: 2 ex;

因此对垂直缩放属性使用垂直度量单位，对水平缩放属性使用水平度量单位。

【讨论】：

【解决方案4】：

请注意，“单/双行间距”之类的术语实际上是指两条相邻行之间的偏移量，以 em 为单位。所以“双行距”意味着每行的高度为 2 em。

因此，如果要指定与“线”成比例的垂直距离，请使用 em。仅当您想要小写字母的实际高度时才使用 ex，我敢说，这是一个更罕见的例子。

更新： Web 标准允许浏览器使用 0.5em 作为 ex 或从字体派生。

但是，无法在字体（OpenType 或 webfont）中可靠地嵌入任何“x-height”信息。

因此，前一种可能性使前单位变得多余，而后者缺乏任何可靠的手段来发生。两者皆有可能的事实使得它更不可靠。

因此，我认为前单位缺乏价值。

【讨论】：

【解决方案5】：

在 CSS 规范中具有它的价值，如果这就是您真正要求的，与具有 em 单位的价值完全相同。

它使您能够将字体设置为相对大小。

你不知道我的基本字体大小是多少。所以网页设计的一个好策略是设置相对的字体大小，而不是绝对的；相当于“两倍于你的正常尺寸”或“比你的正常尺寸小一点”，而不是像“十像素”这样的固定尺寸。

【讨论】：

我同意这一点。但是 em 规范还不够，而且更可靠吗？
@JoelPotter 是的，但仅用于宽度；对于高度，ex 似乎是等价的。
@ANeves 不正确。在 CSS 中，em 是字体的 height（大约），而不是 width。在印刷排版中，em 的概念来自大写 M 的宽度。但是 CSS 精炼了em。见Wikipedia。
如果您想要宽度，请使用另一个答案中提到的ch 单位。