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

Question

我的 css 已根据可用的字体定义了要层叠的字体系列：

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

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

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

提前致谢！

Answer 1

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

Answer 2

AFAIK 用 Ja​​vaScript 是不可能的。您可能能够找出使用的字体，但不能找出字体参数。

因此，您需要搜索这些参数（例如在字体库中）并按字体存储它们，以便在知道使用的字体后查找它们。

Answer 3

一个名为 EightShapes 的 Web 开发机构已经整合了一个工具，可以让您生成 CSS 以裁剪文本上方和下方的空间，从而使布局能够很好地围绕上升和下降。有一篇关于它的随附博客文章。