如何使不同的字体系列显示相同的大小？（计算上）答案

【问题标题】：How to make different font families appear same size? (computationally)如何使不同的字体系列显示相同的大小？（计算上）
【发布时间】：2015-04-23 23:22:59
【问题描述】：

如何使文本在不同字体系列中显示大致相同的大小？我不能通过手动方式做到这一点，它必须在软件中完成。

在我的网络应用程序中，用户可以从许多不同的字体系列中进行选择（所有 Google Webfonts 都适用于初学者），我需要为他们提供所选字体的预览，例如相当于 16px 或其他。问题是不同的字体有非常不同的视觉尺寸，例如Tangerine 的大小约为 Roboto 或 Open Sans 的一半，当预览列表中的一种字体呈现其他字体大小的一半时，它看起来很奇怪！

我尝试了不同的 CSS 字体大小测量单位，例如px、em、ex、inherit 等，但没有对齐大小，因此它们看起来大致相同。

我认为'ex'应该这样做，但它似乎对使字体在视觉上看起来相似的大小没有任何影响（即使我的理解是它应该这样做）。 CSS font-size-adjust 属性也不起作用 - 它只是 Firefox 的开始。

下面的示例代码。我可以做一个解决方案前端（例如 Javascript，我正在使用 Bootstrap 3 和 JQuery）或后端（在我的例子中是 PHP）。

非常欢迎任何建议！非常感谢。

<!DOCTYPE html>
<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Old+Standard+TT' rel='stylesheet' type='text/css'>

</head>
<body>
<span style="font-family: 'Open Sans', sans-serif; font-size: 4ex; font-weight: normal;">Open Sans</span><br>
<span style="font-family: 'Roboto Slab', serif; font-size: 4ex; font-weight: normal;">Roboto</span><br>
<span style="font-family: 'Tangerine', cursive; font-size: 4ex; font-weight: normal;">Tangerine</span><br>
<span style="font-family: 'Josefin Slab', serif; font-size: 4ex; font-weight: normal;">Josefin Slab</span><br>
<span style="font-family: 'Old Standard TT', serif; font-size: 4ex; font-weight: normal;">Old Standard</span><br>

</body>
</html>

【问题讨论】：

标签： jquery css font-size

【解决方案1】：

在 JS Fiddle (http://jsfiddle.net/c2hjr5qz/) 中运行这些字体对我来说似乎是相同的宽度，但您可以做的一件事是让它们全部正确对齐，即设置对象的 line-height，例如所以

span{
    display:inline-block;
    line-height:48px;
}

【讨论】：

谢谢。但是，在那个小提琴中，字体没有正确加载。将我上面代码中的 head 部分放在 HTML 部分中（忽略 JSFiddle 的警告）会给你：http://jsfiddle.net/fusjopap/ 我已经用 xxxxxx 替换了文本 'Tangerine' 因为这是 'ex' 测量单位应该基于的，无论如何你可以看到字符明显小于其他字体。我需要它们大致相同的视觉尺寸。谢谢！
啊，我看到了你的困境。我能想到的唯一真正可靠的解决方案是实际查看它们是如何相互叠加的，并给它们各自的尺寸配给，以使它们看起来像相同的物理尺寸，然后将它们绑起来字体到那个比例。不过，这将是一项巨大的工作，尤其是对于很多字体，但目前看来这似乎是不可能的，因为 x-height 不够接近你想要的