为什么我的字体粗细只是从正常和粗体切换而不是跟随数字？

Question

我按照网站说明在我的网站中实现了 Inter 字体：https://rsms.me/inter/download/ 用于网络使用。

但是，我注意到将字体粗细设置为 100、200、700、800 等并不重要，所发生的一切都是 600 及以上我的字体是粗体，500 及以下我的字体是正常的。我怎样才能为每个数字设置字体粗细？

/* IMPORTANT */
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}

@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

.btnText {
  color: blue;
  font-weight: 500;
}
.boldBtnText {
  color: blue;
  font-weight: 600;
}

<div>
  <p class="btnText">
    normal
  </p>

  <p class="boldBtnText">
    bold
  </p>
</div>

Answer 1

/* IMPORTANT */
@import url('https://rsms.me/inter/inter.css');
:root { font-family: Inter, sans-serif; }
  @supports (font-variation-settings: normal) {
    :root { font-family: InterVariable, sans-serif; }
  }
.btnText {
  color: green;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
}
.boldBtnText {
  color: green;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}
.btnText1 {
  color: blue;
  font-family: sans-serif;
  font-weight: 500;
}
.boldBtnText2 {
  font-family: sans-serif;
  color: blue;
  font-weight: 900;
}

<div>
  <p class="btnText">
    normal
  </p>

  <p class="boldBtnText">
    bold
  </p>
</div>
<div>
  <p class="btnText1">
    normal
  </p>

  <p class="boldBtnText2">
    bold
  </p>
</div>

您可以尝试像上面那样从您的 css 中导入 css