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

Question

(不要与流行的.Net单元测试库Xunit混淆.)

今天厌倦了我开始检查Gmails DOM(是的,我非常无聊).

一切都看起来很简单,直到我注意到某些元素宽度的有趣规范.杰出的Googlites使用罕见的'ex'单位指定了许多表格.

width: 22ex;

起初我很难过("什么是'前'？"),然后它回到了我身上:我似乎记得几年前我第一次学习CSS时的一些东西.从CSS3规范:

[ ex单位 ]等于第一个可用字体的使用x高度.所谓的x高度是因为它通常等于小写"x"的高度.但是,即使对于不包含"x"的字体,也会定义"ex".

好,好.但我以前从未真正看过它(更不用说我自己了).我非常普遍使用ems,并欣赏它们的价值,但为什么是"ex"？它似乎远不如em那么标准,也没那么有用.

我发现讨论这个主题的几个页面之一是Stephen Poley的http://www.xs4all.nl/~sbpoley/webmatters/emex.html.斯蒂芬提出了很好的观点,然而,他的讨论对我来说似乎没有定论.

所以我的问题是:'ex'单元给网页设计带来了什么价值？

(这个问题可能被标记为主观,但我会将这个决定留给比我更有经验的SO'ers.)

Answer 1

当您想要根据文本的小写字母的高度调整大小时,它非常有用.例如,想象一下这样的设计:

在设计的印刷维度中,字母的高度与其余元素具有重要的空间关系.上面的源图像中的线条旨在帮助指出文本的x高度,但它们还显示了围绕该文本进行设计时的指导原则.

正如Jonathan在评论中指出的那样,ex只是em(宽度)的高度版本.

Answer 2

要回答这个问题,可以使用上标和下标.例:

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