Question

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

在我的网络应用中，用户可以从许多不同的字体系列中选择（所有Google Webfonts都是初学者），我需要为他们提供所选字体的预览，例如：相当于16px或其他什么。麻烦是不同的字体具有非常不同的视觉尺寸，例如Tanger看起来大约是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小提琴（http://jsfiddle.net/c2hjr5qz/）中运行这些字体对我来说看起来宽度相同，但是你可以做的一件事就是设置line-height像这样的对象

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

如何使不同的字体系列看起来相同？（计算）

1 个答案:

如何使不同的字体系列看起来相同？ （计算）

1 个答案:

如何使不同的字体系列看起来相同？（计算）