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以及几次硬刷新功能。强制浏览器使用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;
}

将解决所有这些问题。

粗体重的Roboto字体是不可见的

1 个答案: