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

我有几个字体文件:

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

最佳答案

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

关于html - CSS 中如何支持自定义字体的字体粗细?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62184230/

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容