使用2种不同的字体粗细时，Roboto字体高度不一致

Question

我正在从Google字体中加载Roboto，如下所示：

<link href="//fonts.googleapis.com/css?family=Roboto:300,400,400i,500" rel="stylesheet" type="text/css">

我在font-weight：400中设置了一些文本，在同一行中设置了一些font-weight：500。

问题是400文本呈现的字母高度比500文本短。这种情况仅适用于12px，14px和12px的字体。 16px的。

当我在Google字体网站上做同样的事情时，问题不会发生。

这是字体设计的问题还是我如何加载/使用网络字体的问题？

15px local：

16px local：

16px Google字体：

Answer 1

您是否安装了本地版本的Roboto？谷歌尝试在获取自己的字体之前加载本地版本的字体。因此，如果您的计算机上安装了Roboto，可能会导致x高度不匹配，因为您正在混合重量为400的可安装“桌面字体”和重量为500的下载webfont。（或者相反。）