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

Question

如何使不同字体系列的文本显示大致相同的大小？我无法通过手动方式执行此操作，必须使用软件来完成。

在我的网络应用程序中，用户可以 select 来自许多不同的字体系列（所有 Google Webfonts for starters），我需要向他们提供他们 selected 的预览字体，例如相当于 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>

Answer 1

运行这些在 JS Fiddle (http://jsfiddle.net/c2hjr5qz/) 中的所有字体对我来说都是相同的宽度，但是你可以做一件事来使它们全部正确对齐将像这样设置对象的 line-height

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

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

How to make different font families appear same size? (computationally)

css

jquery

font-size

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

How to make different font families appear same size? (computationally)

css

jquery

font-size

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