font-weight: 100 在 reactjs/javascript 中不起作用答案

【问题标题】：font-weight: 100 is not working in reactjs/javascriptfont-weight: 100 在 reactjs/javascript 中不起作用
【发布时间】：2017-12-29 17:40:07
【问题描述】：

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

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

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

我正在使用 reactjs。

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

.thin {
  font-weight: 100;
}

【问题讨论】：

要使用这个字体粗细，你的字体必须支持它。如果您使用的是 Google 字体，请尝试使用必要的粗细。
尝试字体粗细：600；它将变为粗体
定义从细到粗的字符。 400和普通一样，700和粗体一样
@31piy，我应该包括什么？
我想让它瘦400多，有什么办法吗？

标签： javascript css reactjs

【解决方案1】：

为了使用特定的字体粗细，您的字体必须支持它，如果不支持，则 0 到 600 之间的任何值（不包括，正常值为 400）将被解释为正常值，任何更大的值将是粗体（粗体通常为 700）。

如果您的字体没有轻/细变体，那么恐怕您无法获得比正常字体更细的字体（400）。

编辑注意：对于普通字体（400），浏览器默认生成粗体，例如：

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

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

&lt;p&gt;This is bold, but I didn't loaded Roboto 700, only Roboto 400.&lt;/p&gt;

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

【讨论】：

感谢您的回答！

【解决方案2】：

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

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

【讨论】：

感谢您的回答！