粗体的 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 并使用 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 字体 link 中提供 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;
}

将解决所有这些问题。

粗体的 Roboto 字体是不可见的

Roboto font in bold weight is invisible

css

browser

fonts

google-chrome

cross-browser