粗体字的 Roboto 字体不可见

Posted 2023-03-06

【中文标题】粗体字的 Roboto 字体不可见

【英文标题】：Roboto font in bold weight is invisible

【发布时间】：2016-12-01 14:09:12

【问题描述】：

我有一个使用 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 的不安全内容警告。

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

【问题讨论】：

你试过<link href="//fonts.googleapis.com/css?family=Roboto:500|700" rel="stylesheet" type="text/css"> 吗？所以你也可以加载font-weight: 700;？

@EmreBolat 是对的。另外，试试这个字体系列：'Roboto', sans-serif;

@EmreBolat 我已经尝试过了，重新刷新过，但问题仍然存在。我将更新我的问题以反映这一点。

@EmreBolat 啊，它是500,700，不是500|700，但它修复了它。仍然想知道为什么这只是这台计算机上的一个问题。无论哪种方式，如果您将此作为答案发布，我都会接受。

【参考方案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 700 访问其他有它的网站，所以它被缓存了？

没错。 Roboto 非常受欢迎，您的浏览器很有可能已经从某个地方缓存了它。