css - 粗体的 Roboto 字体是不可见的

Question

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

<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 并使用 inspect 元素将 Roboto 文本加粗来复制它。在任何其他计算机上都不会出现此问题。 Chrome 是最新的，没有安装任何扩展。我试过关闭和重新打开 Chrome 以及几次硬刷新。强制浏览器使用调整大小、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;
}

将解决所有这些问题。