Question

我正在尝试用css创建一个font-family：

（对于不同的浏览器，我的每种字体有多种字体来源，但不想将它们全部放在这里）

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Thin.eot");
  font-weight: "100";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-ExtraLight.eot");
  font-weight: "200";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Light.eot");
  font-weight: "300";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.eot");
  font-weight: "normal";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.eot");
  font-weight: "500";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBild.eot");
  font-weight: "600";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.eot");
  font-weight: "bold";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-ExtraBold.eot");
  font-weight: "800";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Black.eot");
  font-weight: "900";
  font-style: "normal";
}

我的浏览器只呈现最后一个文件Montserrat-Black，即使我专门设置了不同元素的字体权重。据我所知，您可以使用不同的权重声明相同的font-family。任何人都知道为什么会发生这种情况？

Answer 1

您的font-weight和font-style描述符值都是引用的字符串。这不正确。它们分别是数字和关键字，这意味着引号不应该在那里。

选择黑色权重的原因是，由于您的font-weight和font-style描述符都无效，因此每个@font-face规则都指向相同的权重和样式（正常），导致这些规则中的最后一个覆盖所有其余规则。由于此字体系列没有其他已知权重（因为描述符都无效），因此无论您在元素上设置的font-weight值是什么，都会使用黑色权重。

Answer 2

删除引号

@font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-ExtraBold.eot");
font-weight: 800;
font-style: normal;
}

设置具有多个权重的单个css字体系列

2 个答案: