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

Posted 2023-03-06

【中文标题】设置字体大小，使字母高度等于某个值

【英文标题】：Setting font-size so that letter height equals a certain value

【发布时间】：2015-06-11 17:59:13

【问题描述】：

我想用 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创建我的字体），但我仍然希望一种适用于未知字体的解决方案来自用户的计算机。

【问题讨论】：

我刚刚使用 chrome 开发工具检查了这个问题的部分文本，它看起来像文本“我怎样才能做到这一点？”是 17px，但 div 的计算高度是 22px，我认为你没有太多控制权，除非你将 line-height 也设置为 17px

@Morpheus 查看我的编辑。

为什么需要设置div高度？为什么不能只设置字体大小，留下div 展开到字体高度？

@Morpheus 我调整了我的例子。

***.com/questions/10718840/…

【参考方案1】：

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

    .the_M
           position : relative;
           height : inherit;