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，以及我在主题（here，here和here）上找到的所有Stack Overflow问题中引用的内容：< / p>

     

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

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

   

   我从W3C找到的唯一解释是old reference from 1997 for 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在OS / 2中的资本高度为714 / 1000（sCapHeight表），资本高度为71.4px。



实际发生了什么。

生成的em square 大于 <{1}}（在最新版本的Chrome，Firefox和Safari for Mac上测试过）。起初，我认为浏览器有font-size的另一个定义，并且正在使该字母的部分等于em square，但我没有找到任何OS / 2与之匹配的指标（有或没有上升，下行，间隙......）。



您还可以看到this CodePen。请注意，我使用font-size突出显示预期的尺寸，但问题出在line-height: 1;（＆＃34;渲染的墨迹＆＃34;）而不是font-size（＆＃34） ;碰撞盒＆＃34;）。这是我必须要准确的，因为我已经多次被误解了。 line-height不是问题。

所以我有三个问题：

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

感谢您的帮助。

Answer 1

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

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

Answer 2

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

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

Answer 3

article（已在现已删除的答案中共享）很好地解释了这一点。这是我试图把它变成一个独立的答案。

假设我们有一个带有 <span> 和 font-family: Roboto 样式的 font-size: 48px，我们想回答一个看似简单的问题：跨度的有效高度是多少？剧透：它是 65px。你可以这样推导它：

首先，您需要了解有关字体的一些指标。如果您使用的是 Linux，则可以像这样使用 FontForge 检查字体：

$ fc-list | grep Roboto
$ fontforge /usr/share/fonts/truetype/roboto/hinted/Roboto-Regular.ttf

在 Element => Font Info... => General 下，您可以获得 Em Size，它有点像字体的无单位基本单位：

在 Element => Font Info... => OS/2 => Metrics 下，您可以找到 ascent/descent，这是字体的最大扩展：

浏览器所做的是将 em 大小 (2048) 与指定的字体大小 (48px) 匹配。基于此，它计算上升/下降 (2146, -555) 所覆盖的区域与 em 大小的关系。所以公式大概是：

result_size = (ascent + |descent|) / em_size * font_size

在这个例子中：

(2146 + 555) / 2048 * 48px = 63.375px

剩下的问题是为什么浏览器实际上到达了 65px。我的假设是上升和下降分别被四舍五入。单独应用该公式，上升为 50.30px => 51px，下降为 13.01px => 14px，结果正好为 65px。