如何在javascript中计算下降高度？

Question

我的 css 已经定义了要级联的字体系列，具体取决于可用的字体：

.myfont { 
    text-transform: uppercase;
    font-family: Calibri, Arial, sans-serif;
    padding: 2em;
    background-color: red;
}

并且，根据渲染的字体，我想调整填充以将全大写文本适当地居中在<sarcasm>美丽的</sarcasm>红色背景中。有没有一种好方法来计算字体下降的大小，以便我可以相应地调整底部填充？

还计算上升高度、上限高度和x 高度的解决方案的奖励积分。

提前致谢！

Answer 1

这是可能的：使用这个库：baselineratio，或typography.js将两个span插入一个容器div中，字体大小为0px，字体大小较大，如100或2000，调用getBoundingClientRect();，获取高度差，然后除以较大的高度。0 px 字体位于基线上。这给出了基线比率、上升部分和下降部分的百分比。