以相同的实际尺寸显示不同的字体？

当我在相同的字体大小使用两个不同的字体在网页中，他们往往表现在不同的实际尺寸：以相同的实际尺寸显示不同的字体？

此示例使用两个谷歌的字体，万民法和变质，在相同的字体大小，指定为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可以找到here。

我对指定像px这样的绝对长度的字体大小的理解是，字体将被缩放以匹配该长度。我的期望是两个不同的字体在相同的字体大小将有匹配的高度或匹配的长度（我了解字体的长宽比可能会不同）。但似乎并不是这里的情况。有什么办法可以使两个任意字体在相同高度或相同长度下显示，而无需手动计算和应用修正？

编辑：一个例子显示在相同字体大小下显示的两种字体的上行距离的下降。

清楚地显示的两个距离是不是这两种字体相同。

编辑：一个例子示出了具有和不具有在两种字体重音字母：

再次，清楚的字母是不同的尺寸。

编辑：继续讨论this article中描述的问题，问题是font-size控制字体em值的显示大小。但em值是任意的（它不必与字体中的任何内容相对应，特别是不必是小写字母'm'的高度），并且不包括上行和下行，它们可以是任何大小在所有（从上面的文章所采取的示例）：

所以结果是一个“100像素”的字体可以只是关于不得以任何有效尺寸。上述文章的作者计算出当时Google Web字体的有效大小范围为0.618至3.378。

由于字体指标（如em尺寸，首字母高度，上升和下降值）未在CSS中公开，因此在CSS中似乎没有任何方法使两个任意字体具有相同的效果尺寸。对于任何特定的字体，您可以使用字体编辑器来查找字体指标值，并根据需要使用这些数字来缩放字体。对于任意字体，一个选项是显示一些文本并使用测量的边界框来确定有效大小并计算适当的缩放因子。

感谢大家对此解释！

来源

2017-08-07 Dr. Pain

我不认为除手动调整外，您可以对此进行任何操作。我已经建立了一个小沙箱进行实验。我用['ch']（https://developer.mozilla.org/en/docs/Web/CSS/length#ch）单元绘制了两个'div'元素。这个想法是看每个字体有多大的一个字符会呈现。不同的'font-size'单位似乎没有任何影响。 https://jsfiddle.net/t31779e1/ –

你应该使用像rem这样的东西然后px :)因为rem是一个相对度量单位，而px是绝对的。但字体总是有不同的大小，而且它不可能实现你想要的。

来源

2017-08-07 14:26:18 Sharpy35

这回答问题的方式是什么？ – Rob

的font-size的觉得还不如单个字符本身的实际大小，但包含每一个字符，就像排版字母块的大小：

块的大小在你的CSS中定义（使用px，pts，ems等），但是这些块中字符的实际大小可以根据使用的字体而有所不同。

字体的任何给定部分的实际高度取决于用户定义的DPI设置，当前元素字体大小以及使用的特定字体。

https://en.wikipedia.org/wiki/Em_(typography)#CSS

可以使用font-size-adjust属性来帮助改变这些字体的一个更接近其他缩放：https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust虽然它支持目前仅限于火狐：http://caniuse.com/#feat=font-size-adjust

来源

2017-08-09 00:19:35 jrrdnx

这似乎不是真的。从上面的注释（https://jsfiddle.net/t31779e1/）中看到JSFiddle，它显示了对于不同的字体，相同字体大小的“块”大小（如你所说）是不同的。 –

@ Dr.Pain定义每个块的宽度和高度，在这里击败你的目的。 [这是一个更新的小提琴]（https://jsfiddle.net/5bzj7ghw/），去除了约束宽度和高度，设置为内嵌块，以便您可以并排查看它们，并使用轮廓代替背景。我还为每个div添加了一个字母，并将“line-height”属性设置为匹配。您可以看到它们的高度匹配（它们已被调整为具有相同的基线），并且它们的高度与正在设置的字体大小（20px = 20px，2em/2rem = 32px）完全相同。 – jrrdnx

@ Dr.Pain如果你想看一看，这里有一篇非常深入的文章：https：//iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align – jrrdnx

字体大小字形从上行字符的大小（例如字母“h”的顶部）到下行字母，例如字母'g'的底部。如果将字体大小设置为20px，则从字母'h'的顶部到字母'g'底部的长度将为20px。一些字母有终端或马刺，字母的末尾可能会延长一些字母的px或者更高。

在你的榜样，有两种字体之间的差异像素。 Metamorphous字体在Gentium没有的一些字母上面有一个标记，这就是高度差异的原因。

You can read more here.

编辑：看到这里与C上面的“卡隆”相比，在右侧的两个万民法字母。

来源

2017-08-09 00:35:15 Rob

谢谢你的解释。但是，很多字体组合显然不是这样： –

对不起，Stackoverflow不会让我继续以前的评论。我已经添加了一个例子，显示两个以相同字体大小显示的字体，上行距离与下行距离的差异。这有什么原因会发生？ –

我做到了。不同之处在于Metamorphous的字母包含那些在字母上面也有标记的字母。因为它是字母表的一部分，所以它是字体大小的一部分，因此是更大的尺寸。 Gentium没有这些标记，所以'g'到'h'是字体大小，而在Metamorphous中，'g'到<任何那些字母都带有标记'是字体大小而不是'h'。 – Rob

以相同的实际尺寸显示不同的字体？

回答

相关问题