使不同的字体以相同的实际大小显示？
当我在网页中以相同的字体大小使用两种不同的字体时，它们通常以不同的实际大小显示：
此示例使用两种 Google 字体：Gentium 和 Metamorphous，字体大小相同，指定为 20px。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link id="Gentium Book Basic" rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Gentium Book Basic"
media="all">
<link id="Metamorphous" rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Metamorphous" media="all">
</head>
<body style="font-size: 20px">
<span style="font-family: Gentium Book Basic">Test Text Length (Gentium)</span>
<br>
<span style="font-family: Metamorphous">Test Text Length (Metamorphous) </span>
</body>
</html>
可以在此处找到此示例的 JSBin 。
我对以 px 之类的绝对长度指定 font-size 的理解是，字体将缩放以匹配该长度。我的期望是相同字体大小的两种不同字体将具有匹配的高度或匹配的长度（我了解字体的长宽比可能不同）。但这里的情况似乎并非如此。有什么方法可以使两种任意字体以相同的高度或相同的长度显示，而无需手动计算和应用校正吗？
编辑：显示以相同字体大小显示的两种字体的下降到上升距离的示例。
显然，显示的这两种字体的两个距离不同。
编辑：显示两种字体中带重音符号和不带重音符号的字母的示例：
同样，显然字母的大小不同。
编辑：继续本文中描述的内容，问题是 font-size 控制字体 em 值的显示大小。但 em 值是任意的（它不必对应于字体中的任何内容，特别是不一定是小写“m”的高度），并且不包括上升部分和下降部分，它们可以是任何大小（示例取自上面的文章）：
所以结果是“100px”字体几乎可以是任何有效尺寸。上述文章的作者计算出当时 Google Web Fonts 的有效尺寸范围为 0.618 到 3.378。
由于字体规格（例如 em 大小、大写字母高度、上升部分和下降部分值）未在 CSS 中公开，因此 CSS 中似乎没有任何方法可以使两种任意字体具有相同的有效大小。对于任何特定字体，您可以使用字体编辑器查找字体规格值，并使用这些数字根据需要缩放字体。对于任意字体，一个选项是显示一些文本并使用测量的边界框来确定有效大小并计算适当的缩放因子。
我感谢所有为解释这一点做出贡献的人！
小智 -2
你应该使用像 rem 这样的东西，然后使用 px :) 因为 rem 是相对测量单位，而 px 是绝对单位。但字体总是有不同的大小，在我看来，这不可能达到你想要的效果。
- 这以什么方式回答这个问题？ (2认同)