时间戳

首页 > 解决方案 > CSS 中如何支持自定义字体的字体粗细？

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

问题描述

我的字体有几个文件：

所以在阅读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定义中的 变得无关紧要，对我来说似乎是错误的。这应该如何工作？

ps

这篇文章似乎支持我的方法，但在解释如何引用其他权重方面还远远不够，而且无论如何我都无法使其工作：https ://www.456bereastreet.com/archive/201012/font -face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

标签： htmlcssfonts

解决方案

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

推荐阅读