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

Question

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

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

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

width: 22ex;

起初我很困惑（“什么是'ex'？”），然后它又回到了我的脑海：我似乎记得几年前我第一次学习 CSS 时的一些事情。来自 CSS3 规范：

[ ex unit is] 等于第一个可用字体的已用 x 高度。之所以称为 x 高度，是因为它通常等于小写字母“x”的高度。但是，即使对于不包含“x”的字体，也会定义“ex”。

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

我发现讨论该主题的少数页面之一是 Stephen Poley 的http://www.xs4all.nl/~sbpoley/webmatters/emex.html。斯蒂芬提出了很好的观点，但是，他的讨论对我来说似乎没有结论。

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

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

score 136 · Accepted Answer

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

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

正如乔纳森在评论中指出的那样，ex 只是 em（宽度）的高度版本。

score 28 · Accepted Answer

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

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

score 2 · Accepted Answer

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

我用 em 和.. padding-left: 2 em; 填充权：2 em；

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

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

score 1 · Accepted Answer

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

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

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

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

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

因此，我主张前单位缺乏价值。

score 0 · Accepted Answer

在 CSS 规范中拥有它的价值，如果那是你真正要问的，与拥有 em 单位的价值完全相同。

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

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

5 回答 5