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

Question

我试图找到font-sizeCSS属性中设置的值对应的内容.

为了给出上下文,我想在CSS中获得em我从其OS/2指标中知道的部分字体(在资本高度之上和基线之下)的大小.该em单元是相对于给定font-size和OS/2的指标是相对于EM-正方形.

我所期待的

我的期望是基于以下参考.我没有发现任何更清楚或更准确的东西.

1. 根据CSS2.1中的W3C参考font-size,以及我在主题(这里,这里和这里)发现的所有Stack Overflow问题中的引用:

   字体大小对应于em square,这是排版中使用的概念.请注意,某些字形可能会在其正方形之外出血.

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

   

   我从W3C找到的唯一解释是1997年CSS1的旧参考,它与em square我使用的现代数字定义一致:

   某些值(例如宽度度量)以相对于抽象方块的单位表示,抽象方块的高度是相同类型大小的类型行之间的预期距离.这个方块称为EM方块.(...)常用值为250(Intellifont),1000(类型1)和2048(TrueType).

因此,如果我正确理解这些引用,则应使用指定font-size的值来生成整个em square字体,并且我们应该能够根据字体的大小和度量来计算字体的一部分的大小.

例如,用......

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

......我们应该有一个em square的100px,因为Helvetica Neue有一个资本高度714 / 1000(sCapHeight在OS/2表)的资本高度71.4px.

实际发生了什么.

生成的em square是更大的比font-size(在Chrome,Firefox和Safari浏览器适用于Mac的最新版本进行测试).起初,我认为浏览器有另一个定义,em square并且正在使该字母的一部分等于font-size,但我没有找到任何匹配的OS/2指标(有或没有上升,下行,间隙......)它.

您还可以看到此CodePen.请注意,我line-height: 1;用来突出显示预期的大小,但我的问题是font-size("渲染的墨水")而不是line-height("碰撞框").这是我必须要准确的,因为我已经多次被误解了.line-height不是问题.

---

所以我有三个问题:

• 我是否正确理解了W3C的引用,或者我假设这些引用未提及的内容？
• 如果没有,为什么生成的字体的em-square大于font-size？
• 最重要的是:我怎么知道渲染的em-square的大小(相对于font-size)？

谢谢您的帮助.

Answer 1

您对W3C参考的理解是正确的，但对红框的理解却不正确。

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

Answer 2

阅读他的文章：真正有助于理解字体大小的内容：

http://iamvdo.me/zh-CN/blog/css-font-metrics-line-height-and-vertical-align#lets-talk-about-font-size-first