CSS @font-face仅加载2个字体重量

Question

我正在尝试使用以下CSS，该CSS添加了一个字体系列，具有六个不同的字体重量。

@font-face { font-family: myFont; font-weight: Thin; src: url('../fonts/myFont-Thin.ttf'); }
@font-face { font-family: myFont; font-weight: Light; src: url('../fonts/myFont-Light.ttf'); }
@font-face { font-family: myFont; font-weight: Medium; src: url('../fonts/myFont-Medium.ttf'); }
@font-face { font-family: myFont; font-weight: Regular; src: url('../fonts/myFont-Regular.ttf'); }
@font-face { font-family: myFont; font-weight: Bold; src: url('../fonts/myFont-Bold.ttf'); }
@font-face { font-family: myFont; font-weight: Black; src: url('../fonts/myFont-Black.ttf'); }

.myClass{
    font-family: myFont, sans-serif;
    font-weight: Medium;
}

当我尝试使用类myClass时，它使用MyFont-bold.ttf，字体重量为400，而不是使用MyFont-Medium.ttf，字体重量为400。开发人员工具，我能够看到它仅加载了我字体的两个字体重量：大胆和黑色。当我删除黑色字体重量的线路时，它会加载常规和粗体。为什么它仅加载两个字体重量而不是全部。

Answer 1

您正在使用无效的字体重量关键字。 （请参阅MDN： font-weight'> font-weight ）

样式名称例如“灯”或“媒体”通常在桌面环境中使用（例如使用图形应用程序） - 这些样式名称实际上存储在字体文件中（至少以TrueType/ttf等格式）。

但是，浏览器不能使用这些内部存储的样式名称，需要明确的样式/重量映射：

@font-face {
  font-family: myFont;
  font-weight: 100;
  font-style: normal;
  src: url("../fonts/myFont-Thin.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/myFont-Light.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/myFont-Medium.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/myFont-Regular.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/myFont-Bold.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 900;
  font-style: normal;
  src: url("../fonts/myFont-Black.ttf") format('truetype');
}

body {
  font-family: myFont, sans-serif;
}

.thin {
  font-weight: 100;
}

.medium {
  font-weight: 500;
}

.black {
  font-weight: 900;
}

我强烈建议使用数字字体重量值更好地兼容并指定 格式喜欢格式（'trueType'）

您还应包括字体式以映射正常和斜体样式。