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

Question

我正在从谷歌字体加载 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 文本更短的字母高度。这仅适用于 12 像素、14 像素和 16 像素的字体大小。

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

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

15px 本地：

16px 本地：

16px 谷歌字体：

Answer 1

您是否安装了本地版本的 Roboto？谷歌试图在获取自己的字体之前加载本地版本的字体。因此，如果您在计算机上安装了 Roboto，x-height 的不匹配可能是由于您混合了重量为 400 的可安装“桌面字体”和重量为 500 的下载网络字体。（或相反。）