css - font-size 真正对应的是什么？

Question

我试图找到 font-size CSS 属性中设置的值对应的是什么。

为了提供上下文，我想在 CSS 中获取我从其 OS/2 指标中获知的字体部分(高于大写高度和低于基线)的大小，以 em 为单位。 em 单位与给定的 font-size 相关，OS/2 指标与 em-square 相关。

我的期望

我的期望基于以下引用资料。我没有发现任何更清楚或更精确的东西。

1. 根据 W3C reference for font-size in CSS2.1 ，以及我在该主题上发现的所有 Stack Overflow 问题中引用的内容(here、here 和 here):

   The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.

2. 根据我在排版方面的一些知识，em square 是字体度量的整个正方形，其中定义了上升、下降、间隙、(等...)线。在 OS/2 指标中，em square 是字体本身的大小(通常为 1000 或 2048 UPM)。

   
   _{(来源:microsoft.com)}

   我从 W3C 找到的唯一解释是 old reference from 1997 for CSS1 ，它与我使用的 em square 的现代数字定义一致:

   Certain values, such as width metrics, are expressed in units that are relative to an abstract square whose height is the intended distance between lines of type in the same type size. This square is called the EM square. (...) Common values are 250 (Intellifont), 1000 (Type 1) and 2048 (TrueType).

因此，如果我正确理解这些引用，font-size 中指定的值应该用于生成整个em square 的字体，我们应该能够从字体的大小和规范计算出字体的一部分的大小。

例如，与...

.my-letter {
    font-family: 'Helvetica Neue';
    font-size: 100px;
    text-transform: uppercase;
}

...我们应该有 100px 的 em square，因为 Helvetica Neue 的大写高度为 714/1000(OS/2 表中的 sCapHeight)，大写高度为 71.4px。

实际发生了什么。

生成的 em square 比 font-size 大(在最新版本的 Chrome、Firefox 和 Safari for Mac 上测试过)。起初，我以为浏览器对 em square 有其他定义，并且正在使字母的 part 等于 font-size，但我没有找到任何与之匹配的 OS/2 指标(有或没有上升、下降、间隙……)。

您还可以看到this CodePen .请注意，我使用 line-height: 1; 来突出显示预期的大小，但我的问题是 font-size (“呈现的墨水”)而不是 line-height(“碰撞框”)。这是我必须明确的事情，因为我已经被误解了好几次。 line-height 不是问题。

---

所以我有三个问题:

• 我是否正确理解了 W3C 引用资料，或者我假设了这些引用资料没有说明的事情？
• 如果不是，为什么生成的字体有一个大于 font-size 的 em-square？
• 最重要的是:我怎么知道渲染的 em-square 的大小(相对于 font-size)？

感谢您的帮助。

Answer 1

您对 W3C 引用文献的理解是正确的，但您对红框的理解是错误的。

红色框未描绘 em-square。它的高度是指标上升和下降的总和。