字体仅适用于第一个字体 Vue js

Question

我们购买了 .otf 各种字重（常规、半粗体和粗体）。但是当我使用以下语法将 app.scss 包含到我的 Vue 项目中时，只有提到的第一种字体有效。其余的都不起作用。

所以按照下面的代码，我只能使用常规字体。但是如果我先移动url(../fonts/Gilroy-SemiBold.otf) format("opentype"),，我将只能使用SemiBold。

@font-face {
  font-family: "Gilroy";
  src: local("Gilroy"),
  url(../fonts/Gilroy-Regular.otf) format("opentype"),  // font-weight: 400
  url(../fonts/Gilroy-SemiBold.otf) format("opentype"), // font-weight: 600
  url(../fonts/Gilroy-Bold.otf) format("opentype"); // font-weight: 700
}

body {
  overflow-x: hidden;
  font-family: 'Gilroy', sans-serif;
  font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  color: $text-color;
}

这很奇怪，我该如何解决？

Answer 1

我试图将 font-face 分成多个部分


@font-face {
  font-family: "Gilroy";
  src: local("Gilroy"),
  url(../../static/fonts/Gilroy-Regular.otf) format("opentype");
  font-weight: 400;
}

@font-face {
  font-family: "Gilroy";
  src: local("Gilroy"),
  url(../../static/fonts/Gilroy-SemiBold.otf) format("opentype"),
  url(../../static/fonts/Gilroy-Bold.otf) format("opentype");
  font-weight: 600;
}

@font-face {
  font-family: "Gilroy";
  src: local("Gilroy"),
  url(../../static/fonts/Gilroy-Bold.otf) format("opentype");
  font-weight: 700;
}

而且效果非常好！

字体仅适用于第一个字体 Vue js

Font face only working for the first font Vue js

css

fonts

font-face