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

Question

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

我怎样才能做到这一点？

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

---

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

.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

首先你需要设置位置，然后继承高度 比如：

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