css - font-weight bold 不适用于@font-face, chrome 72

Question

在 chrome 72 (mac) 中，字体粗细不起作用，在 Safari 和 FF 中，粗体按预期显示。

/* latin */
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  src: local('Questrial'), local('Questrial-Regular'), url(https://fonts.gstatic.com/s/questrial/v8/QdVUSTchPBm7nuUeVf70viFluW44JQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

p ,strong {
font-family:'Questrial';
}

<p>normal text</p>
<strong>bold text</strong>

解决此问题的解决方案是下载一个粗体字体文件并将其设置为@font-face，不幸的是，在我的情况下，Questrial-Bold 不存在，还有其他方法可以解决此问题吗？

Answer 1

如果你去https://fonts.google.com/specimen/Questrial?sidebar.open=true&selection.family=Questrial你会看到你的字体没有粗体选项 ...但是为什么Firefox显示粗体？好问题，也许是因为它是更好的浏览器？

因此，选择不同的字体系列并确保使用 <link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet"> 确实包含粗体选项。或 @font-face { font-family: '...'; font-weight: 700; ... } .附言700 = 粗体。