css - 设置字体大小，使字母高度等于某个值

Question

我想使用 CSS 将字母缩放到另一个元素的精确高度。例如，我可能希望文本与某些图像一样高:

我怎样才能做到这一点？

当我将 font-size 设置为等于图像的高度时，字母变小了。我可以尝试手动调整它，直到它看起来相等，但我想计算一下。

---

我目前的解决方案是将行高设置为图像的高度，并根据字体规范计算字体大小:

.the_image {
    height: 28px;
    }

.the_M {
    line-height: 28px;
    font-size: calc(28px * 2048 / 1490);
    }

在这种情况下，字体规范为 2048 UPM(每 em 个单位)，字母“M”的高度为 1490 个单位。将 em 大小(2048 个单位)除以字母高度 (1490) 得到一个将“M”缩放到所需高度(此处:28px)的因子。

在这种情况下，我知道我使用的字体，因为我用@font-face 嵌入了它，而且我知道字体的规范，因为我在字体编辑器中查看过它(我使用 Fontforge 和 Glyphs创建我的字体)，但我仍然希望从用户的计算机上一个适用于未知字体的解决方案。

Answer 1

首先需要设置position，然后继承height像这样的东西:

    .the_M{
           position : relative;
           height : inherit;
     }