px – em – % – pt – 关键词

在 CSS 中设置字体大小方面，您可以选择很多选项。 您可以应用一个“关键词”，例如p { font-size: small; }或数值。 使用数值时，需要声明一个度量单位，该单位本身有四种选择。 哪种最好？当然取决于情况。 让我们来看一下

关键词

在关键词中设置字体大小的有效选项是 xx-small、x-small、small、medium、large、x-large 和 xx-large，以及相对关键词 smaller 和 larger。

令人惊讶的是，关键词大小在不同的浏览器和平台之间非常一致。 请参见 Opera、Firefox、IE 6 和 Safari 中的测试页面。

请注意，尽管它们非常接近，但在换行位置和段落总高度方面存在差异。

只有在使用其中一个相对大小关键词时，“级联”才会生效，并且父元素的字体大小会影响子元素。 例如，如果父元素设置为medium，而子元素设置为large。 只有large 将用于设置子元素的大小。 但是，如果父元素设置为medium，而子元素设置为larger（注意，是 larger，而不是 just large），则子元素将“放大”以大于父元素的字体大小。 更改父元素，更改子元素，因此称为“级联”。

关键词是调整网页字体大小的一种非常好的方法。 其中一种更流行的技术是在 body 元素上设置一个关键词字体大小，然后在页面上的其他所有地方使用相对字体大小。 这使得能够非常轻松地调整页面上的字体大小（例如，使用 JavaScript），并使整个页面大小一致地向上或向下移动。

但是，关键词不能提供非常细粒度的排版控制，因为选择相当有限。

px

如果您需要细粒度控制，则以像素值 (px) 调整字体大小是一个极好的选择（这是我最喜欢的）。 在电脑屏幕上，没有比单个像素更精确的了。 使用像素调整字体大小，您实际上是在告诉浏览器以精确的像素高度渲染字母。

Windows、Mac、锯齿、抗锯齿、跨浏览器，无关紧要，设置为 14px 的字体将为 14px 高。 但这并不是说仍然不会有一些差异。 在下面的快速测试中，结果比使用关键词更一致，但并不完全相同。

由于像素值的特性，它们不会级联。 如果父元素具有 18px 像素大小，而子元素为 16px，则子元素将为 16px。 但是，可以组合使用字体大小设置。 例如，如果父元素设置为 16px，而子元素设置为 larger，则子元素确实会比父元素更大。 一个快速测试向我展示了这一点。

“Larger” 将父元素的 16px 提升到 20px，增加了 25%。

过去，像素因其可访问性和可用性问题而受到负面评价。 在 IE 6 及更低版本中，以像素设置的字体大小无法由用户调整。 这意味着我们这些年轻健康的时尚设计师可以在 12px 的屏幕上设置字体并轻松阅读，但当年纪稍长一些的人想要放大字体以便阅读时，他们却无法做到。 这是 IE 6 的错误，而不是我们的错误，但我们必须面对现实。

以像素设置字体大小是最准确的（而且我发现最令人满意的）方法，但请考虑一下仍然在您的网站上使用 IE 6 的访问者数量及其可访问性需求。 我们正处于不再需要关注此问题的边缘。

em

Em 值可能是最难理解的值，可能是因为它们的概念本身是抽象和任意的。 以下是要点：1em 等于相关元素的当前字体大小。 如果您尚未在页面上的任何位置设置字体大小，则它将是浏览器默认值，这可能是 16px。 因此，默认情况下 1em = 16px。 如果您要在 body 上设置 20px 的字体大小，则 1em = 20px。

从历史上看，我认为“em”值基于大写字母 M 的宽度，但不要引述我的话。

当我们开始设置更复杂的字体大小时，em 的情况会变得稍微复杂一些。 假设我们需要一个具有较大字体大小的标题，因此我们设置h1 { font-size: 2em; }该“2”本质上是当前 em 值的乘数。 因此，如果当前 em 大小为 16px，则该标题标签将变为 32px。 该计算结果很清晰，但您可以想象它通常不会这样，需要进行四舍五入。

使用 em 值的最流行方法是在 body 上将字体大小设置为 62.5%。 由于默认浏览器字体大小为 16px，因此这使其变为 10px（无需硬编码为 10px，因为这不会级联）。 使用 10 作为乘数比使用 16 更容易。 这样，您需要 18px 的字体大小？ 使用 font-size: 1.8em。

那么，当它只是使用像素值的抽象时，为什么还要使用所有这些 em 呢？ 三个可能的原因

1. 它们在 IE 6 中是可调整大小的
2. 与其他大小的关系（弹性宽度网站）
3. Em 的级联效果非常好

第一个是最重要的。 如果您基本上想要使用像素，但不喜欢可访问性问题，则 em 可能是您的选择。

Em 不仅用于字体，它还是一个度量单位，您可以将其用于任何其他长度（高度、宽度等）。 弹性宽度网站将 em 值用于所有内容，这使得网站本质上是“可缩放的”，这意味着当您放大字体大小时，所有内容都会一直放大到网站的宽度。 Em 以这种方式彼此之间具有直接关系。 如果您有一个高度为 10em 的框，并且其中的字体大小为 1em，则它将占用该框高度的 1/10。 这种精确的比例关系使 em 值成为强大的网页设计技术。

关于 em，有一个潜在的顾虑，与 #3 相关。 它们确实会级联。 每个 em 值都相对于其父元素的值。 如果您将 em 作为像素值的直接替代，则可能会导致问题。 例如，您可能会将“p”（段落）和“li”（列表项）的字体大小都设置为 1.2em。 今天对您来说看起来很棒，但明天网站上发布了一些内容，其中包含列表项内的段落。 这两个值将级联（1.2 x 1.2），并且该列表项的字体大小将大于其他任何列表项。 除了删除标签之外，没有其他解决方法。

%

百分比的工作原理相当明显。 也就是说，它们的工作方式与您想象的一样。 如果父元素的字体大小为 20px，而子元素的字体大小为 50%，则结果将为 10px。 与 em 一样，百分比大小的本质在于它是相对的。 它也以相同的方式级联，因此上面描述的列表项和段落项的问题也适用于此。

使用百分比进行字体大小调整的一种流行技术是在 body 上设置一个合理的字体大小（如“small”），然后对其他所有内容使用百分比。 这允许您在一个位置交换该关键词，以便缩放整个页面的字体大小，这使得像字体调整器界面功能之类的功能更容易实现。

pt

可以声明字体大小的最后一个度量单位是磅值 (pt)。 磅值仅用于打印 CSS！ 磅是用于现实生活中纸上印刷排版的度量单位。 72pt = 1 英寸。 1 英寸 = 现实生活中像尺子一样的 1 英寸。 不是屏幕上的 1 英寸，这完全取决于分辨率。

就像像素在显示器上对字体大小进行精确调整一样，磅值在纸上也是精确的。 为了获得最佳的跨浏览器和跨平台打印页面结果，请设置一个打印样式表并使用磅值调整所有字体的大小。

为了确保万无一失，我们不使用磅值进行屏幕显示的原因（除了它很荒谬之外）是跨浏览器的结果差异很大。