CSS @font-face 仅加载 2 个字体粗细答案

【问题标题】：CSS @font-face Only Loading 2 Font-WeightsCSS @font-face 仅加载 2 个字体粗细
【发布时间】：2022-07-02 23:06:46
【问题描述】：

我正在尝试使用以下 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 类时，它使用字体粗细为 400 的 myFont-Bold.ttf，而不是使用字体粗细为 400 的 myFont-Medium.ttf。开发人员内部工具，我可以看到它只加载了我字体的两种字体粗细：粗体和黑色。当我删除黑色字体粗细的行时，它会以常规和粗体加载。为什么它只加载两个字体粗细而不是全部？

【问题讨论】：

标签： css fonts font-face

【解决方案1】：

您使用了无效的 font-weight 关键字。（见 MDN：font-weight）

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

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

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

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

.thin {
  font-weight: 100;
}

.medium {
  font-weight: 500;
}

.black {
  font-weight: 900;
}

我强烈建议使用数字字体粗细值以获得更好的兼容性。

您还应该包含font-style 以映射正常和斜体样式。

【讨论】：