font-weight：100在reactjs / javascript中不起作用

Question

我在实现font-weight时遇到问题：100。

我希望我的句子超轻/瘦，但是当我使用font-weight：100时，它不起作用。

我该怎么办？我需要导入或安装某些东西吗？

我正在使用reactjs。

<p class="thin">Test</p>

.thin {
  font-weight: 100;
}

Answer 1

为了使用特定的字体权重，你的字体必须支持它，如果没有，那么0到600之间的任何值（不包括，正常值是400）将被解释为正常，并且任何更大的值将是粗体（粗体通常是700）。

如果您的字体没有轻/薄变种，那么我担心您的字体重量不会比正常（400）更差。

编辑注意：对于仅仅是正常的字体（400），浏览器默认生成粗体，例如：

@import url('https://fonts.googleapis.com/css?family=Roboto');

p {
  font-family: 'Roboto';
  font-weight: 700;
}

<p>This is bold, but I didn't loaded Roboto 700, only Roboto 400.</p>

在这种情况下，渲染可能因浏览器而异，但通常不会。

Answer 2

如果您在谷歌字体上选择字体，您有两种选择：使用默认嵌入代码嵌入它或自定义它（在您选择字体后的叠加层中）

如果您自定义它，则可以选择要包含的字体粗细。并非每种字体都支持每种字体粗细。如果您无法选择它，则此字体不存在。