Question

我的css根据可用的字体定义了要级联的font-family：

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

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

还计算ascender height，cap height和x-height的解决方案的奖励积分。

提前致谢！

Answer 1

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

Answer 2

使用JavaScript无法实现的AFAIK。您可以找到使用过的字体，但不能找到字体参数。

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

Answer 3

一个名为“ EightShapes”的Web开发机构将tool组合在一起，使您可以生成CSS来裁剪掉文本上方和下方的空间，从而使布局在上升和下降位置均能很好地工作。有一个accompanying blog post。