每个字体系列超过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名称，则可以使用weight es

设置一个字体集class

@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了解详情

Answer 2

是的，有不同的字体权重值，如果您随机使用任何值，它将不会反映，因为它们只会给出相同的结果。

像

如果您给出值(100 200 300 400 500 600 700 800 900)

然后它将字体权重属性定义为瘦到粗字符。 400将与正常相同，700将与粗体相同。

p.normal {
    font-weight: normal;
}

p.light {
    font-weight: lighter;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

输出

参考： Click Here