这是一个很好的问题，但答案并不令人满意。

类型的大小，无论以像素、点 (1/72") 还是毫米为单位指定，都是 em-square 的高度，这是一个不可见的盒子，通常比从最高上升点到最低下降点的距离大一点。

鉴于这是一个有点武断的措施

• 取决于字体的确切技术设计
• 无法从打印或光栅化的样本中精确测量

除了作为近似值之外，它不是很有意义或有用。

在您的情况下，通过实验确定您需要在 Photoshop 中指定的大小以匹配浏览器的渲染。您应该会发现这对于任何字体来说都是一个恒定比例，但如果您更改浏览器或操作系统，我不希望会出现这种情况。

ASCII 时间！假设下面的两个盒子是 1900 年左右的铅类型。那时，字体是用铅铸造的（或用木头雕刻的）。对于要设置为印刷锁定的类型，它们必须连接到实心块。这就是类型维度（以磅为单位）的来源：

+--------------+  +-------------+  <----+
|              |  |             |       |
|      XX      |  |             |       |
|     X  X     |  |             |       |
|    XX  XX    |  |             |       |
|    XX  XX    |  |     X       |
|    XXXXXX    |  |    X X      |   Point size of the type
|   XX    XX   |  |    XXX      |
|   XX    XX   |  |   X   X     |       |
|  XX      XX  |  |   X   X     |       |
|  XX      XX  |  |             |       |
|              |  |             |       |
+--------------+  +-------------+  <----+

注意上面两个字母的大小不同，但它们的边界框是一样的。因此，就点而言，这两种字体的大小相同。

如今，我们用铅和木头制作的类型不多，而且大部分是数字的。但是，点大小的概念仍然存在，因为对于放置类型的每个字母，都有一个高度相同的虚拟框。同样，正是这个虚拟框定义了点的大小，而不是字体本身的物理测量值。字体的实际大小通常小于磅值（但也可以更大）。

因此，以像素为单位测量类型不起作用，但是，您可以在 CSS 等中“设置”以像素为单位的类型。浏览器尽其所能在声明的 px 大小之间进行转换。但它总是一个模糊的估计。

归根结底，没有准确的方法可以让两种字体字体大小完全相同，除非在视觉上查看它们并更改每个字体的大小，直到您看到它们的大小相同。

字体的“字体大小”是指字体的“em 高度”，它不一定与字体中特定字符的高度相同。

通常字体的 em 高度遵循相同的基本理念 - 它将大致设置为从最低下降（例如字母的底部g）到最高上升（例如字母的顶部h）的距离：

如您所见，没有涵盖整个跨度的通用字符。

对于数字字体，字体的“em 高度”是由字体设计师做出的选择，并且完全不必遵守这个约定：数字字体设计师可以为他们的 em 大小选择任何基础。然而，字体仍然倾向于遵守，至少大致上，是上面描述的那种约定。在过去，当字体由金属块组成时，“em 高度”是其中一个块的高度 - 自然，这些块必须足够大，以适应所有的上升、下降和口音。

令人困惑的是，现在许多字体都包含超出 em 高度的字符。例如，现代字体通常包含带有重音符号的大写字母（例如Ć）——这些重音符号超出了传统的印刷升序，因此这些（可能还有其他特殊字符）落在“em”的顶部之外。为了保持与旧类型的一致性，我们不会调整 em 大小来允许这些 - 我们保持 em 大小并且只是让这些扩展出来。任何使用这种重音符号的排版师都需要确保它们有足够的空间延伸，尽管通常正文中的行间距是足够的。

正文中的行间距是在一行文本的下一行和下一行的上一行之间留下的空间。引用的文本“字体大小”在其测量中不包括行间距。这就是为什么当您选择 12 磅大小时，线条之间的距离并不正好为 12 磅（1/6 英寸）。

任何文本的行距都会受到许多因素的影响，包括显示它的软件。它可能会受到 CSS 字段的影响line-height，其中1.4表示行间距是 em 高度的 0.4 倍，因此整行正文将占用 em 高度的 1.4 倍，包括行间距。在其他应用程序中，可以不同地指定行间距：文字处理器通常将“行间距”值指定为某些“单行间距”的倍数，但与 CSS 不同的是，“单”间距并不意味着没有行间距，而是一些“默认”行间隙，应用程序尝试根据字体文件中的元数据（如果存在的话）提出默认值。有多种标准用于指定字体中的度量（例如，在 Truetype 中，有不同的 Mac 和 Windows/OS2 标准），因此默认行间距可能因应用程序和操作系统而异。

现在，即使设计师确实遵循了他们的 em 高度的可预测约定，这仍然不能告诉您大写字母（大写高度）或小写字母（如“x”（x 高度或中线））的大小，因为这些可以根据上升高度在字体之间自由变化。在一个字体系列中，这些通常是一致的。例如，Times New Roman Bold 和 Times New Roman Regular 具有相同的 cap-height 和 x-height，并且上升、下降和基线都将在粗体和非粗体部分之间匹配。

尝试输入竖线字符 ('|') 并测量它。如果我正确地复制了你的情况并且你的抗锯齿没有模糊太多，它应该是 22px。

22px 表示类型块的高度。但是每个字符填充块的方式不同。'g' 或 'q' 将占据该 22px 的下部区域，而大写字母和小写字母（如 'b' 或 'd' 将占据上部区域。'|' 是唯一（如果不是唯一）将完全填充 22px 空间的字符之一。

我不知道如何与您的 CSS 设置进行比较，但这解释了 Photoshop 如何解释文本高度。