Css 是否可以计算浏览器中呈现的字体上方和下方的空间量？

我试图使填充像素完美地位于字体中大写字母的基线和顶部（在本例中为Google Roboto）。这意味着如果我想要100px的填充，我需要减去字体的“内置填充”量

我能够在glyphs试用版中打开字体并获得一些有用的数字，但是给出最佳结果的数字远不是直观的，我想知道它到底是如何工作的

以下是我正在探索的地方的图片：

文本为100px，所需填充为100px（至E的边缘） 左闭塞，线路高度：1em 中间为直线高度：1.4em 右侧是一幅图像，显示了使用glyphs中的信息的计算方法

红色背景显示段落元素的大小。 破折号“-”周围的蓝色背景是因为它被选中了，也表示一个有趣的大小，当以字形打开时，它与整个“艺术板”的外观大小最为匹配

我发现，如果我计算中线参考线与字母顶部和底部之间的距离，那么我可以计算字母上方和下方的空间大小，然后除以2048（字体表示1 em的单位数）

.div1{
填料顶部：钙（1em-0.132em）；
左侧填充物：计算值（1em-0.081em）；
填料底部：钙（1em-0.157em）；
右侧填充：计算（1em-0.081em）；
}

您所做的工作是可行的，但更重要的问题是，您为什么要尝试这样做，因为您正在尝试基于内容进行对齐，而浏览器无法做到这一点：他们在整个内联块中设置文本样式，而不是像LaTeX那样使用单个字母装箱。当然，你可以通过一些JS来改变这一点，将文本切碎，然后为每个字母创建

框，但是你已经破坏了字体排版单词的能力，而不是单个字母。那么：你为什么要这样做？为什么？因为我想让填充物看起来更均匀。。。这可能不是“浏览器可以做的事情”。。。不过，我想知道浏览器是如何计算字体在“内联块”中的位置的，我想知道计算填充的最佳方法——考虑到这一点，他们没有。他们询问用于塑造文本的任何文本引擎依赖项，然后根据单词边界规则（每个语言环境不同）打破结果框序列。浏览器本身对这些框中的内容一无所知，唯一的判断方法是以某种方式点击文本引擎的功能，而（目前）没有相关的API。因此，您的另一个选择是使用并行引擎，如shaper（opentype.js、fontkit.js等）的JavaScript实现，然后重新渲染文本，并希望它与浏览器的方式相同。或者，您在画布上镜像文本，并在此基础上进行负空间计算，这非常“昂贵”让事情变得很慢。浏览器内容不是LaTeX，试图使web内容具有基于方框内容而不是方框的完美布局，这在很大程度上是在与河流搏斗，而不是随波逐流。@Mike'Pomax'Kamermans，感谢您的参与。我不太确定我需要的信息是否真的与“内容”有关。特定字体的“内置填充”量是字体设计固有的。我要寻找的数字需要工作，无论呈现的是什么单词。因为所有Ts、H和E的顶部与内联块顶部的距离基本相同。也许可以使用您提到的js“Shapper”提取推断“内置填充”所需的数字。。。我会调查的。。。