Css‘ ex’单元的值是多少？

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

今天在一阵无聊中，我开始查看 GmailDOM (是的，我非常无聊)。

一切看起来都很简单，直到我注意到一个关于某些元素宽度的有趣规范。著名的谷歌人使用罕见的“ ex”单元指定了许多表协议。

width: 22ex;

一开始我被难住了(“前任是什么?”)，然后我想起来: 我似乎记得几年前当我第一次学习 CSS 的时候。返回文章页面

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

很好。但是我从来没有真正见过它被使用过(更不用说我自己了)。我经常使用 ems，并且很欣赏它们的价值，但是为什么要用“ ex”呢？它似乎远不如 em 标准，也远不如 em 有用。

我找到的讨论这个话题的少数几页之一是 Stephen Poley 的 http://www.xs4all.nl/~sbpoley/webmatters/emex.html。斯蒂芬的观点很有道理，然而，他的讨论对我来说似乎没有决定性的意义。

所以我的问题是: 什么价值的’前’单位借给网页设计？

(这个问题可能带有主观性，但我会把这个决定留给比我更有经验的社会工作者。)

34371 次浏览
小开
最佳答案

It is useful when you want to size something in relation to the height of your text's lowercase letters. For example, imagine working on a design like so:

alt text


In the typographic dimension of design, the height of letters has important spatial relationships to the rest of the elements. The lines in the source image above are intended to help point out the x-height of the text, but they also show where guidelines would be if designing around that text.

As Jonathan pointed out in the comments, ex is simply the height version of em (width).

小开

The value of having it in the CSS spec, if that's what you're really asking, is exactly the same as the value of having the em unit.

It enables you to set fonts to relative sizes.

You don't know what my base font size is. So one good strategy for web design is to set font sizes which are relative, rather than absolute; the equivalent of "double your normal size" or "a little smaller than your normal size" rather than a fixed size like "ten pixels".

小开

Another thing to consider here is how your page scales when a user ups or downs their font size (perhaps using ctrl+mouse wheel (windows)).

I have used em with.. padding-left: 2 em; padding-right: 2 em;

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

Thus using a vertical unit of measure for a vertically scaling property and a horizontal unit of measure for a horizontally scaling property.

小开

Note that, terms like "single/double line spacing" actually mean the offset between two adjacent lines, measured by em. So "double line spacing" means each line has a height of 2 em.

Therefore, if you want to specify a vertical distance that is proportional to "lines", use em. Only use ex if you want the actual height of lowercase letter, which is, I dare say, a much rarer instance.

UPDATE: The web standard allows the browser to use either 0.5em as ex or derive from the font.

However, there is no way to reliably embed any "x-height" information in a font (OpenType or webfont).

Hence, the former possibility makes the ex-unit redundant, and the latter lacks any reliable means to happen. And the fact that either is possible makes it even less reliable.

Thus I argue for the lack of value of the ex-unit.

小开

To answer the question, one use is with superscript and subscript. Example:

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

For actual value in pixels, getComputedStyle is there to the rescue.

For example, on my maching,

(Chrome on macOs - default font) 1ex == 7.2px

(Chrome on macOs - "system-ui" font) 1ex == 8.4px


提交答案