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

【问题标题】：Font face only working for the first font Vue js字体仅适用于第一个字体 Vue js
【发布时间】：2021-10-05 00:13:12
【问题描述】：

我们购买了不同重量的.otf（Regular、SemiBold 和 Bold）。但是当我使用以下语法将我的 Vue 项目的app.scss 包含到时，只有提到的第一个字体有效。其余的都不起作用。

所以按照下面的代码，我只能使用常规字体。但是如果我先移动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;
}

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

【问题讨论】：

标签： css fonts font-face

【解决方案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;
}

它就像一个魅力！

【讨论】：