html - 每个字体系列超过 2 个字体粗细？

Question

默认情况下，可以实现不同的字体、字体粗细和样式，以便稍后在我的 css 样式中使用:

@font-face {
  font-family: "My Font Family";
  src: url("fonts/my-font-family-regular.ttf");
  font-weight: regular;
}

@font-face {
  font-family: "My Font Family";
  src: url("fonts/my-font-family-bold.ttf");
  font-weight: bold;
}

现在我想添加一个 light 和一个 medium 版本:

@font-face {
  font-family: "My Font Family";
  src: url("fonts/my-font-family-light.ttf");
  font-weight: 200;
}

@font-face {
  font-family: "My Font Family";
  src: url("fonts/my-font-family-medium.ttf");
  font-weight: 500;
}

但这对我不起作用。是否有关于字体粗细值的约定？

Answer 1

编辑

如果您只需要一个font 名称，您可以使用classes 设置一个字体集weight

@font-face {
  font-family: "myFont";
  src: url("fonts/my-font-family-light.ttf");
  font-weight: 200;
}

   .s1{
     font-family: myFont;
     font-weight: 200;
      }
   .s2{
     font-family: myFont;
     font-weight: 400;
      }
   .s3{
     font-family: myFont;
     font-weight: 600;
      }

否则，为每个元素分配不同的名称

@font-face {
  font-family: "myLightFont";
  src: url("fonts/my-font-family-light.ttf");
  font-weight: 200;
}

@font-face {
  font-family: "myMediumFont";
  src: url("fonts/my-font-family-medium.ttf");
  font-weight: 500;
}

检查 w3schools了解更多信息