29

我正在尝试查找font-sizeCSS 属性中设置的值对应的内容。

为了给出上下文，我想在 CSS 中获取em我从 OS/2 指标中知道的部分字体的大小（在大写高度之上和基线之下）。em单位是相对于给定的font-size，而 OS/2 指标是相对于 em-square 的。

我的期望

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

  1. 根据CSS2.1中的W3C 参考font-size，以及我在该主题上找到的所有 Stack Overflow 问题中的引用（此处、此处和此处）：

    字体大小对应于 em 方格，这是排版中使用的一个概念。请注意，某些字形可能会在它们的 em 方格之外流血。

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

    字母指标
    （来源：microsoft.com）

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

    某些值（例如宽度度量）以相对于抽象正方形的单位表示，抽象正方形的高度是相同字体大小的字体行之间的预期距离。这个正方形被称为EM正方形。(...) 常用值为 250 (Intellifont)、1000 (Type 1) 和 2048 (TrueType)。

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

例如，与...

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

...我们应该有一个em squareof 100px，并且因为Helvetica Neue有一个大写高度714 / 1000（sCapHeight在 OS/2 表中），一个大写高度是71.4px。

预期的信

实际发生了什么。

生成em square的大于（在font-size最新版本的 Chrome、Firefox 和 Safari for Mac 上测试）。起初，我认为浏览器有另一个定义，em square并且正在使字母的一部分等于font-size，但我没有找到任何与它。

渲染字母

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

所以我有三个问题：

  • 我是否正确理解了 W3C 参考资料，或者我假设这些参考资料没有说明？
  • 如果不是，为什么生成的字体的 em-square 大于font-size？
  • 最重要的是：我怎么知道渲染的 em-square 的大小（相对于font-size）？

谢谢您的帮助。

4

2 回答 2

9

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

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

于 2017-02-04T05:04:36.783 回答
2

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

假设我们有一个<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下面你可以找到上升/下降，这是字体的最大扩展：

在此处输入图像描述

浏览器所做的是将 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。

于 2021-03-25T12:09:54.773 回答