字体粗体不适用于@font-face，chrome 72答案

【问题标题】：font-weight bold not working with @font-face, chrome 72字体粗体不适用于@font-face，chrome 72
【发布时间】：2019-08-06 15:08:23
【问题描述】：

在 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 不存在，还有其他方法可以解决这个问题吗？

【问题讨论】：

在我的 chrome 72 (windows) 上似乎没问题
谢谢，似乎该错误在 chrome 72 中，（mac）
你能检查一下这个 codepen https://codepen.io/prinkpan/pen/PLReVx 是怎么看你的吗？ @RenzoCalla
嗨，codepen 也正在重现我的错误..谢谢顺便说一句
我在 macbook 上的 v81 中遇到了同样的问题

标签： css google-chrome font-face

【解决方案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 = 粗体。

【讨论】：