css'ex'单位的值是多少？ [英] What is the value of the css 'ex' unit?

问题描述

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

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

相当直接，直到我注意到某些元素的宽度的有趣的规范。这些杰出的Googlites使用罕见的ex单位指定了一些表格列。

  width：22ex; 
  

一开始我被骗了（什么是'ex'？我：我似乎记得几年前当我第一次学习CSS的东西。 从CSS3规范：

[ ex unit is]等于第一个可用字体。 x-height是这样调用的，因为它通常等于小写字母x的高度。但是，即使对于不包含x的字体，也定义了ex。

但我从来没有见过它使用过（更少使用它自己）。我使用ems相当普遍，并欣赏他们的价值，但为什么前？

我发现讨论这个主题的几页之一是Stephen Poley的 http://www.xs4all.nl/~sbpoley/webmatters/emex.html 。

所以我的问题是：'ex'单位借给网页设计什么价值？

（此问题可以标记为主观，但我会将此决定留给比自己更有经验的人。）

解决方案

当你想对与文本的小写字母的高度相关的内容进行大小设置时，这很有用。例如，想象一下这样的设计：

在设计的排版维度中，字母的高度与其余的元素有重要的空间关系。上面的源图片中的线条旨在帮助指出文本的x高度，但是如果围绕该文本进行设计，它们还会显示指南的位置。

正如Jonathan在评论中指出的，ex只是em的宽度版本（width）。

(Not to be confused with Xunit, a popular .Net unit testing library.)

Today in a fit of boredom I started inspecting Gmails DOM (yes, I was very bored).

Everything looked pretty straightforward until I noticed an interesting specification on the widths of certain elements. The illustrious Googlites had specified a number of table cols using the rare 'ex' unit.

width: 22ex;

At first I was stumped ("what's an 'ex'?"), then it came back to me: I seem to remember something from years ago when first I was learning about CSS. From the CSS3 spec:

[The ex unit is] equal to the used x-height of the first available font. The x-height is so called because it is often equal to the height of the lowercase "x". However, an ‘ex’ is defined even for fonts that do not contain an "x".

Well and good. But I've never actually seen it used before (much less used it myself). I use ems quite commonly, and appreciate their value, but why the "ex"? It seems much less standard a measurement than the em, and far less useful.

One of the few pages I found discussing this topic is Stephen Poley's http://www.xs4all.nl/~sbpoley/webmatters/emex.html. Stephen makes good points, however, his discussion seems inconclusive to me.

So my question is: What value does the 'ex' unit lend to web design?

(This question could be tagged subjective, but I'll leave that decision to more experienced SO'ers than myself.)

解决方案

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:

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).

这篇关于css'ex'单位的值是多少？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！