html - 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/

Answer 1

我要关闭它。答案是:它确实有效。在我的特殊情况下，我错了，因为使用了 Material UI，它为某些元素硬编码了特定的权重。我需要从我的元素中删除 MUI。麻烦多于帮助