React JS-对不同的字体粗细使用不同的字体？

Question

我试图在ReactJS中为不同的字体权重使用不同的字体，但是在我们的全局样式表中尝试了两种不同的导入方法之后，我只能加载第一个或最后一个导入的字体。

在ReactJS中有可能吗？在其他地方使用相同的方法，我从来没有遇到问题。

这只会加载第一种字体：

css.global(
'@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraLight} )`,
  fontWeight: 'lighter',
  fontStyle: 'normal',
},
'@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraRegular} )`,
  fontWeight: 'normal',
  fontStyle: 'normal',
},
'@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraMedium} )`,
  fontWeight: 'bold',
  fontStyle: 'normal',
},
'@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraBold} )`,
  fontWeight: 'bolder',
  fontStyle: 'normal',
}
);
css.global('html', {
  color: '#231e21',
  fontFamily: 'ModernEra, sans-serif',
  userSelect: 'none',
  fontWeight: 'bold',
});

这只会加载最后一个（我知道为什么）：

css.global('@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraLight} )`,
  fontWeight: 'lighter',
  fontStyle: 'normal',
});
css.global('@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraRegular} )`,
  fontWeight: 'normal',
  fontStyle: 'normal',
});
css.global('@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraMedium} )`,
  fontWeight: 'bold',
  fontStyle: 'normal',
});
css.global('@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraBold} )`,
  fontWeight: 'bolder',
  fontStyle: 'normal',
});
css.global('html', {
  color: '#231e21',
  fontFamily: 'ModernEra, sans-serif',
  userSelect: 'none',
  fontWeight: 'bold',
});

我希望能够使用“较浅”，“正常”，“粗体”或“粗体”定义字体。有没有人遇到相同的问题，或者有解决方案？

谢谢。

Answer 1

看起来指定的字体粗细没有枚举为正确的数字值。因此，也尝试指定数字值！

以下是已发布的解决方案，可以帮助我理解和解决此问题：https://stackoverflow.com/a/33687499/4525600

怪异熊猫的信用额

希望这很有帮助