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不相关，对我来说似乎是错误的。这应该如何工作？

p.s。

本文似乎支持我的方法，但在解释如何引用其他权重方面还不够深入，无论如何我都无法使它起作用：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退出项目。比帮助更大的麻烦

CSS如何支持自定义字体的字体粗细？

1 个答案: