下载的字体未在浏览器上正确呈现

Question

我下载的字体存在问题，但未在浏览器上呈现。

我在index.css文件中定义字体，该文件是根css文件。

@font-face {
  font-family: "RecoletaAlt";
  src: local("RecoletaAlt") url("./assets/fonts/RecoletaAlt.woff")
    format("woff") url("./assets/fonts/RecoletaAlt.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

我也将字体加载到index.html页面中

<link
  rel="prefetch"
  href="./src/assets/fonts/RecoletaAlt.woff"
  as="font"
  type="font/woff"
/>
<link
  rel="prefetch"
  href="./src/assets/fonts/RecoletaAlt.woff2"
  as="font"
  type="font/woff2"
/>

然后我尝试使用此处的字体，如图所示。当我在浏览器中检查它时，它显示字体系列是 RecoletaAlt，但是当我检查计算机选项卡时，我看到“家族名称：Times” PostScript 名称：Times-Bold，字体来源：本地文件（11 个字形）”，这表明它没有使用该字体。此外，当页面加载时，我检查网络选项卡，我在网络请求中看到该字体，这表明它正在加载中。

<h2
   className="text-3xl font-semibold text-center mb-6"
   style={{
      fontFamily: "RecoletaAlt",
      fontSize: "30px",
      fontWeight: "700",
   }}
 >Get started</h2>

以下是我的文件结构

Answer 1

我能够根据评论解决问题。我意识到我省略了不同字体格式之间的逗号。

Before (Not working)
@font-face {
  font-family: "RecoletaAlt";
  src: local("RecoletaAlt") url("./assets/fonts/RecoletaAlt.woff")
    format("woff") url("./assets/fonts/RecoletaAlt.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

After (works fine)
@font-face {
  font-family: "RecoletaAlt";
  src: local("RecoletaAlt"), url("./assets/fonts/RecoletaAlt.woff")
    format("woff"), url("./assets/fonts/RecoletaAlt.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

我希望它对某人有帮助。