当使用像素设置CSS字体大小时，该值是指字母的宽度还是高度？

Question

字号的像素值是指字体的高度还是宽度？

CSS：

.sixteen {
  font-size: 16px;
}

HTML：

<span class='sixteen'>a</span>

这个 "a" 字符的高度和宽度都是 16 像素吗？还是说它的最大宽度/高度为 16 像素，以适应一个 16px 的盒子？

我看到的所有文档在这个问题上都含糊不清。

- Stephen Sorensen

Answer 1

高度指的是从升部（如'h'或'l'）顶部到降部（如'g'或'y'）底部的距离。请参阅有趣的《字体解剖学》文章：http://en.wikipedia.org/wiki/Typeface_anatomy。

- D Mac

Answer 2

font-size属性指定字体的大小，无论使用何种单位。字体的大小可以描述为字体的高度，但即使如此，这只是一个宽泛而实用的描述；字符可能会超出或低于由字体大小定义的水平线。大小是一个更或多或少抽象的属性，不应期望它与任何字符的高度（更不用说宽度）相对应。

特别地，设计一个字体，使字母“a”占据整个字体的高度是完全错误的。 “a”的高度通常约为字体大小的一半，但这在不同字体中肯定会有所变化（尝试使用相同的字体大小在Times New Roman和Verdana中测试“a”）。

- Jukka K. Korpela

---

我认为这完全不正确。升高部分和下降部分已包含在字体大小中 - 说字符超出或低于字体大小是误导性的。你可能是在想x高度吧？x高度是指像“x”这样的非圆形字符从基线到顶部的高度。升高部分和下降部分超出了字体的x高度，但很少有人会认为x高度等同于字体大小。此外，在大多数领域（包括HTML渲染）中，字体大小并没有宽泛的定义。 - D Mac

我没有混淆字体大小和x高度。从上升部到下降部的距离只是一个粗略的描述，而不是规范。相当多的情况下，字体使用较少的高度，有时它们会使用更多。演示代码：<p style="font: 42pt Verdana; line-height: 1em; background: yellow; border: solid red 1px;">QÅgjþÊ</p>。CSS 2.1规范说：“字体大小对应于em方块，这是排版中使用的概念。请注意，某些字形可能会超出它们的em方块。” http://www.w3.org/TR/CSS2/fonts.html#font-size-props - Jukka K. Korpela

Answer 3

根据 Vincent De Oliveira 的这篇文章，font-size 实际上与字符的实际高度没有任何关系。它甚至不是包含文本的内联元素的高度。

当然，font-size 属性的值越大，文本就越大。但像素值并不能直接转换为文本的实际大小。

然而，font-size 的像素值设置了用于设置边距、填充等的 1em 的大小。

- Masa Kudamatsu