自定义字体在CSS中如何支持字重？

Question

我有几个字体文件:

• Graphik-Black.otf
• Graphik-Bold.otf
• Graphik-Medium.otf
• Graphik-Regular.otf
• Graphik-Semibold.otf
• Graphik-Thin.otf

因此，在阅读https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face时，我希望能够这样声明我的字体:

  @font-face {
    font-family: 'Graphik';
    font-weight: 900;
    src: url('/fonts/Graphik-Black.otf') format('opentype');
  }
  @font-face {
    font-family: 'Graphik';
    font-weight: 700;
    src: url('/fonts/Graphik-Bold.otf') format('opentype');
  }
  @font-face {
    font-family: 'Graphik';
    font-weight: 500;
    src: url('/fonts/Graphik-Medium.otf') format('opentype');
  }
  @font-face {
    font-family: 'Graphik';
    font-weight: 400;
    src: url('/fonts/Graphik-Regular.otf') format('opentype');
  }
  @font-face {
    font-family: 'Graphik';
    font-weight: 600;
    src: url('/fonts/Graphik-Semibold.otf') format('opentype');
  }
  @font-face {
    font-family: 'Graphik';
    font-weight: 100;
    src: url('/fonts/Graphik-Thin.otf') format('opentype');
  }

然后像这样使用它：

p {
  fontFamily: 'Graphik';
  fontWeight: 100;
}

或者更好的是：

p {
  fontFamily: 'Graphik';
  fontWeight: thin;
}

但是这些都不起作用。 我被告知应该像这样完成：

  @font-face {
    font-family: 'Graphik-Black';
    src: url('/fonts/Graphik-Black.otf') format('opentype');
  }
  @font-face {
    font-family: 'Graphik-Bold';
    src: url('/fonts/Graphik-Bold.otf') format('opentype');
  }

并且：

p { font-family: 'Graphic-Black' }

但这将使定义中的font-weight无效，对我来说似乎不太对。这应该如何工作？

附言：

这篇文章似乎支持我的方法，但在解释如何引用其他字重方面并不够详细，在任何情况下，我都无法使其工作：https://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

- ekkis

Answer 1

我要关闭这个问题。答案是：它确实有效。在我的情况下，我犯了错误，因为使用了Material UI，它为某些元素硬编码了特定的权重。我需要将MUI从我的项目中删除。它比帮助更加麻烦。

- ekkis