Open Sans 字体粗细不能变轻

Question

这是我要复制的字体样式。它是Open sans字体系列，字体大小14px，字体粗细300

这就是我迄今为止所取得的成就。不要介意间距，但我在这里应用的字体样式与上面相同。但正如你所看到的，我的主要问题是字体粗细更粗，它看起来不像我上面的例子中的 font-weight:300

我不确定这里发生了什么。顺便说一下，我尝试复制字体样式的原始网站是基于 bootstrap 的，而我当前正在研究的字体样式是 buefy 或 bulma。

因此，如果我尝试设置字体粗细，它只能应用大小 600 和 800。我的目标是将其设置为 300，这样它看起来应该与我正在复制的网站相同。

我还尝试了 buefy/bulma 排版类助手（has-text-weight-light、has-text-weight-bold），但它只能变得粗体而不是更轻。我还读过有关导入来自谷歌字体的 open sans 字体的信息，我只需选择我想要的字体粗细，但我还没有这样做，因为我试图保留代码中已有的内容，我不这样做据我所知，在我们的代码库中没有看到任何字体的导入，但是 open sans 工作得很好，只是字体粗细不行。

Answer 1

我已经导入了 google 字体 open sans 字体，但您需要确保导入的是 (Light 300)。查看导入链接，它有 300 和 400。

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

span{
margin-right:10px;
}

div{
  font-family:'Open Sans';
  font-size:14px;
  font-weight:300;
  
}

<div> 
<span>About Us</span>
<span>Products &#38; services</span>
<span>Portfolio &#38; Case Studies</span>
<span>Contact Us</span>
<span>News</span>
</div>