【发布时间】：2018-02-17 03:42:39
【问题描述】：
我正在从 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 和 16px 的字体大小上。
当我在 Google 字体网站上做同样的事情时，问题不会发生。
这是字体设计的问题还是我如何加载/使用网络字体的问题？
15px 本地：
16px 本地：
16px 谷歌字体：
【问题讨论】：
-
你从哪里读到这个字体保证了所有重量的相同 x 高度？在没有明确承诺的情况下，期望跨权重统一 x 高度是您出现问题的原因。
-
@Mike'Pomax'Kamermans 这个字体在谷歌字体官方网站上具有一致的 x 高度这一事实让我相信有些事情是不对的。
-
但是，Google 字体不是任何字体的官方发布渠道，并且因托管剥离/修改版本的字体而臭名昭著。话虽如此，首先要做的是删除您的副本并从官方位置重新下载这些字体的官方版本，然后看看它们的作用。
标签： css fonts font-size webfonts google-fonts