粗体的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 并使用检查元素将 Roboto 文本设置为粗体来复制它。在任何其他计算机上都不会出现此问题。 Chrome 是最新的，没有安装任何扩展。我尝试过关闭并重新打开 Chrome 以及几次硬刷新。强制浏览器使用调整大小、CSS 或 JS 重新绘制也无法解决问题。

这不会欺骗问题Google Fonts Roboto 的字体粗细，正常（400）和粗体（700）工作，浅色（300）不行。该问题出现在该网站的 http 和 https 版本上，字体加载为 //，并且我没有从 Chrome 收到不安全内容警告。

造成此问题的原因是什么？我可以在网站或此人的计算机上执行哪些操作来进一步排除故障或修复此问题？

Answer 1

如果您使用 Google 字体

<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;
}

将解决所有这些问题。

Answer 2

官方文档提供了这个嵌入代码：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

通过此代码，我们可以使用粗体的 Roboto 字体。

在此处查找更多信息：https://fonts.google.com/selection?query=roboto