粗体字的 Roboto 字体不可见

Question

我有一个使用 Roboto google 字体的内部使用网站。这是包含它的代码。

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

&

body {
    font-family: "Roboto";
}
b, strong {
    font-weight: 700;
}

我在我的公司发现有人使用 Chrome 无法呈现这种粗体字体。我可以通过访问 Youtube 并使用检查元素将 Roboto 文本设为粗体来复制它。在任何其他计算机上都不会出现此问题。 Chrome 是最新的，没有安装任何扩展。我试过关闭和重新打开 Chrome 以及几次硬刷新。使用 resize、CSS 或 JS 强制浏览器重新绘制也不能解决问题。

这不会欺骗问题Font Weight with Google Fonts Roboto, normal (400) and bold (700) work, light (300) does not。该问题出现在该站点的 http 和 https 版本上，字体使用 // 加载，并且我没有收到来自 Chrome 的不安全内容警告。

是什么原因造成的，我可以在网站上或个人计算机上做些什么来进一步排除或修复这个问题？

Answer 1

如果你使用Google Fonts

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

没有后备字体之类的；

body {
    font-family: "Roboto";
}

b, strong {
    font-weight: 700;
}

您应该在您的 Google 字体链接中提供 font-weight，例如：

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

或者，您应该提供后备字体；

body {
    font-family: "Roboto", sans-serif;
}

这样做，如果您的浏览器找不到font-weight: 700; Roboto 字体，它可以使用您系统中合适的sans-serif 字体。

在理想情况下，使用font-family 来支持所有可能的计算机系统，例如；

body {
        font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

将解决所有这些问题。