论CSS中可使用的font-size的长度单位

本文由Tom Hodgins审阅。感谢SitePointer的编审们，帮助SitePoint提供最优质的内容给读者！

CSS给开发者提供了许多种长度单位，用于各种不同的CSS属性，如 margin， padding， line-height还有 font-size。为了满足不同的需求，我们有了各种各样的长度单位。即使你可以给某一CSS属性赋予相同的值，其背后的计算逻辑也是不一样的。不同情况下，适用的长度单位是不同的。例如，如果你需要元素的 width或者 height依赖于视窗的宽度或者高度，那么最可靠的长度单位就是 vh， vw， vmin以及 vmax。

本文里， 你可以学习到不同的长度单位，以及它们是如何影响其元素中的字体大小的。

像素单位(px)

像素是固定的长度单位。它们是根据用户屏幕上的每一个点的尺寸确定的。然而，现在的设备通常都有不同的像素密度。意即，当我们说有些设备的像素大小是标准设备的1/4时，它们的实际像素密度就是标准设备的四倍。不过这个差异可以通过使用参考像素reference pixel来避免。参考像素是指，在约一臂长的距离处（大约28英寸）「译者注：约71厘米」，在像素密度为96DPI的屏幕上的一个像素的尺寸大小。也就是说，一个像素的宽高约等于0.26mm。

使用像素设置文字元素的font-size既难维护，又对用户不那么友好。如果你总重新设计一个非常大的网站，改变所有元素的文字大小可能变成一个梦魇。你也许不得不修改很多元素的 font-size，使得页面在不同断点下适用不同的屏幕尺寸。更有甚者，如果用户想通过设置浏览器的文字大小让文字变大或者变小，就不能生效了。

让我们看一下对不同元素使用像素设置 font-size会有怎样的效果。下面是我们接下来要用来作为例子的的部分代码。

<div class="container-box">
  This text is directly inside the parent `div` element.
  <p>This is the first paragraph of our container.</p>
  <p>The second paragraph contains a link to <a href="http://en.wikipedia.org/">WikiPedia</a>, the free encyclopedia.</p>
  <p>I have also included a link to SitePoint as a direct child of the containing `div` element.</p>
  <a href="https://www.sitepoint.com/">A link to SitePoint.</a>
</div>

下面是CSS给不同元素设置的字体大小。

div {
  font-size: 20px;
}

code {
  font-size: 18px;
}

p, a {
  font-size: 22px;
}

参见 CodePen上 使用像素设置字体大小（By@SitePoint）。

正如你所见，每个元素的 font-size和定义的像素值是相同的。这和元素嵌套并无关系。例如，两个链接的 font-size都是22px。你可以尝试修改浏览器设置的字体大小，但你会发现，并不能生效。

简而言之，缺乏灵活性是使用像素设置元素 font-size的缺点，应当避免。

Em

使用em作为长度单位可以帮你避免任何被用户设置覆盖产生的问题。设置 font-size为1em的元素实际高度依赖与浏览器设置。除非用户或者你在其他地方设置，其默认大小是16px。

元素实际的 font-size是根据其继承的字体大小计算出的。也就是说，如果一个元素继承的 font-size是25px，那么设置该元素为2em时，其实际大小就是50px。

接下来的CSS代码把所有的元素的 font-size都设置成em单位。

div {
  font-size: 1.2em;
}

code {
  font-size: 0.9em;
}

p, a {
  font-size: 1em;
}

参加CodePen里的这个Setting Font Size in em Units（By@SitePoint）

前例中的第二个 div是在另一个 div元素里。我们同样设置 div的元素 font-size为1.2em。也就是说，第二个 div的 font-size是前一个 div的1.2倍。例如，计算出的维基百科链接的 font-size，在第一个div里是19.2px，但在第二个 div里的是23.04px。比例约等于1.2。

如果你希望在一个自适应性的网站中根据不同的断点设置放大或者缩小不同元素的字体大小，你可以给 html和 body在不同断点下设置不同的 font-size。这样其中的元素就都能够缩放了。

由于这一单位的具体值取决于给定元素继承的 font-size，因此，如果要单独设置网站的某些部分的字体大小，比如独立的模块中的元素，则这一单位很有效。

Rem

Em唯一的问题就是有时候我们并不需要子元素的 font-size随着父元素的 font-size一起变化。继承 font-size的逻辑会给计算整个元素的实际大小增加额外的复杂度。

你可以通过使用rem来避免这一缺陷。设置为1rem的值会让元素和root元素的 font-size大小相同。这样你就不需要考虑字体 font-size的继承问题了。

下面的CSS是把容器 div的 font-size设置为 rem单位值。其他部分的元素依然是使用 em作为 font-size的单位。

div {
  font-size: 1.2rem;
}

code {
  font-size: 0.9em;
}

p, a {
  font-size: 1em;
}

参见CodePen上使用rem设置字体大小的例子（by @SitePoint）。

容器 div的 font-size设置为rem，避免了字体大小的继承关系。

正如本例那样，你可以使用这个这个单位，给某个不同模块设置对应的 font-size。这一来，就能让模块内所有元素基于他们的父元素设置 font-size，也可以让整个模块独立出来。

百分比

使用百分比和em的计算行为相似。它们常用在自适应网站设计中与根据不同的页面宽度断点设置不同的字体大小。正如下例:

html {
  font-size: 62.5%;
}

div {
  font-size: 2rem;
}

code {
  font-size: 0.9em;
}

p, a {
  font-size: 1em;
}

因为浏览器的默认 font-size是16px，所以 html的元素 font-size为62.5%的正好就是10px。这样就让页面其他的字体大小计算相对容易。例如，你可以调整一个元素的 font-size为3rem，使其值为30px，或者4.2rem也就是42px，等等。

参加CodePen上的使用百分比设置字体大小的例子，（by @SitePoint）。

视窗单位（vw，vh，vmin，vmax）

视窗单位非常有趣。它们使你可以根据视窗的尺寸大小控制字体的 font-size。如果使用得当，它们还可以避免通过不同断点设置字体大小的实现代码。这是因为这些单位值会随着视窗的高度、宽度做连续性的变化。例如，1vw在视窗为400px宽时是4px，在视窗宽度为1000px时，就变成了10px。SitePoint上已经有一篇文章专门讨论视窗单位和它们的应用场景。想了解的话可以去看一下那篇文章。

参加CodePen上的使用视窗单位设置字体大小的例子。（By@SitePoint）。

使用视窗单位的问题就是计算出的 font-size可能会让字体不适合阅读，字体有可能非常小或者非常大。一个小技巧就是在使用视窗单位的同时，也使用其他字体设置，避免字体过大或者过小。这个技巧在视窗单位的基础排版一文中有具体解释。

其他绝对值单位

CSS也允许其他很多绝对值单位，这些单位在屏幕排版的情况下使用较少，更多是用在传统的打印介质中。你可以使用pt或者pc设置打印的字体大小版式。这些值分别使用0.0123或者0.1666英寸为单位。类似的，你还可以使用英寸（in），厘米（cm）和毫米（mm）来设置页面的打印边距。

使用关键字来设置字体大小

另一个选择是使用关键字设置 font-size。有两种类型的关键字：绝对和相对的。绝对值关键字常用在指定字体大小，其值是根据不同的用户浏览器计算出的一个数据表里的某项。绝对值关键字有： xx-small， x-small， small， medium， large， x-large以及 xx-large。

如果你选择使用相对值关键字，那么 font-size就会根据在表里个各项以及该元素的父元素的 font-size计算决定。有两个相对值关键字： larger以及 smaller。如果父元素的 font-size是 x-small，其子元素的 font-size设置成 larger，那么就相当于子元素的 font-size是 small。参见下例：

div {
  font-size: larger;
}

code {
  font-size: smaller;
}

p, a {
  font-size: small;
}

参见CodePen上的使用关键字设置font-size的例子。（By@SitePoint）。

例中，第二个 div是在另一个 div之内。因为我们把 div的 font-size设置成 larger，因此增加了嵌套内的第二个容器的 div的字体大小。另外，嵌套对于段落中的文字没有效果。这是因为它们的 font-size是用绝对值关键字设置的。

浏览器支持

在决定在生产环境上使用哪种单位之前，你应该先确定你的目标浏览器能够支持。

绝对值单位比如px，pt，pc，in，cm和mm是在所有浏览器都支持的。类似的，em单位也是所有主流浏览器都支持的，包括老一点版本的IE。

但是，rem并不能在IE8或者更低版本的浏览器支持。即便在IE9或者IE10的版本里，使用rem给缩写的 font属性设置字体大小时，都可能使赋值失败。这两个浏览器也不支持给伪元素使用rem单位。

本文讨论的所有单位中，视窗单位的浏览器支持是最少的。记住IE11和Edge都不支持vmax单位。

结论

本文里，我们讨论了在CSS中使用不同单位长度以及它们各自的不同之处。总的来说，你可以尽量避免使用绝对单位，应该多尝试使用相对单位。在相对单位里，你应该在模块当中使用em设置字体大小，给独立模块使用rem单位，例如给一个模块的根元素使用rem。你也可以结合使用视窗单位和其他单位，来保证你的排版会随着视窗宽高变化而自动适应。

小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。