CSS 技巧：em 不是 “m”，但 ex 是 “x”

今天早上，Ghodmode Development 公司的文斯分享了一个有趣的小实验，证明在 CSS 中，”em “不是 “m”。我和其他人都或多或少地回应了 “d’uh”。这种现象我们已经见过很多次了，但并不完全理解其目的。事实上，我曾试图设计一个实验来证明 “em “何时是 “m”，但我做不到。原来，我对字体大小一无所知。谁知道呢？

字体设计小回顾

我必须向特里-阿克尔（Terry Acker）点头致意，并首先承认，字体是字母或 “字形 “的一致形状；而字体实际上是字体加上大小。当我误用这些术语时，他会纠正我，所以我想确保我的理解是正确的。

测量字体有两种方法：相对测量和绝对测量。相对测量是指你有某种基线字形（即字母）来决定其他所有字体的大小。绝对值是一个硬性数字。

在 CSS 中，绝对测量值为 px、cm、point 和 pica。相对测量值是 em 和 ex。

我所不知道的我所不知道的

我记得多年前在一本关于字体设计的书上看到过，”em “是大写字母 “M “的宽度。ex “是小写 “x “的高度。我以为在 CSS 中，”em “和 “ex “的行为方式是一样的。其实不然。

在 CSS 中，em 并非水平测量。现在，我们在讨论组中来回讨论 em 是什么。起初，我认为它是一种水平测量。后来我又认为它是一个 “em 正方形”（意思是由 “m “的高度和宽度构成的正方形）。我两次都得到了纠正，但都没有解释浏览器是如何计算出 em 到底有多大的。于是我阅读了规范。

我现在对字体大小的了解

CSS 规范实际上是循环的。如果你查找有关字体大小的规范，就会看到这样的内容：

字体大小与排版中使用的 em 正方形概念相对应。请注意，某些字形可能会超出其 em 方格。

然后，你会读到以下内容：

在所有其他属性中，”em “和 “ex “长度值是指当前元素的计算字体大小。在 “font-size “属性中，这些长度单位指的是父元素的计算字体大小。

明白了吧。字体大小就是 “em 方形”！让我们来看看什么是 “em”：

相对单位是

em：相关字体的 “字号
ex：相关字体的 “x-高度

em “单位等于使用该单位的元素的 “字体大小 “属性的计算值。例外情况是 “em “出现在 “font-size “属性本身的值中，在这种情况下，它指的是父元素的字体大小。它可用于垂直或水平测量。(在排版文本中，该单位有时也被称为四倍宽）。

因此，font-size 就是 em 方形，而 em 就是（计算出的）字体大小。我们刚刚发现蛇在吃尾巴。

现在，我想我又知道一些关于字体大小和行高的知识了

现在，一个排版上的怪现象终于得到了解释（我想）：

只要字形或多或少是方形的，你的行高和字母间距看起来就没问题。但是，如果你的字体中字母非常宽（基本上是一个宽矩形），这就解释了为什么你的行高会有那么多空间。同样，如果字母的高度大于宽度（高矩形），也可以解释字母间距。浏览器正在形成一个 “em-square”，它扰乱了你的视觉空间。

处理异常矩形字体
如果你想让行高看起来非常紧凑，尤其是在使用大号或异常宽的字体后，不妨试试这个方法：

body{
line-height: 2ex
}

行高不是根据文本宽度设置的，而是根据字母的真实高度设置的。浏览器会根据 “x “的高度或 (em)/2 来计算 ex。

如果您的文本是一个高矩形（高大于宽），那么下面的方法可以解决字母间距可能出现异常宽的问题。我们对照 ex 设置字母间距；基本上就是用高度来修正宽度。

body{
letter-spacing: -.5ex;
}

那么，这一切有什么意义呢？

em 是一种很好的测量方法，因为它是圆形的。最终，浏览器会选择字体大小，这意味着如果你在字体大小中从不使用像素，那么你的排版在任何浏览器中都能很好地运行。ex是一个很好的测量值，因为它是相对于排版而言的，从现在起，我将使用ex来设置行高。