你在使用Tailwind吗？我看到你在为字体定义一个变量，但在这里没有使用它，还有几个额外的步骤来连接Tailwind。
我看到的唯一语法问题是您已经提到的类名上的反勾号。

import '@/styles/globals.css';
import localFont from '@next/font/local';
const myFonts = localFont({
  src: '../public/Fonts/AnultraSlabRegular.ttf',
  variable: '--Anultra-Slab',
});
const myFonts2 = localFont({
  src: '../public/Fonts/IntroRegular.ttf',
  variable: '--Intro-Regular',
});
export default function App({ Component, pageProps }) {
  return (
    <main className={`${myFonts2.className} ${myFonts.className}`}>
      <Component {...pageProps} />
    </main>
  );
}

你也可以使用你在CSS中定义的变量，它应该看起来像这样：

button {
  font-family: var(--Anultra-Slab);
}

我也遇到过类似的问题，字体被加载但没有被应用，因为全局样式将font-family覆盖为空，使其默认为系统字体。我在dev tools的"computed"视图中展开font-family以查找问题，然后将font-family: inherit添加到违规类中以修复它。
您应该能够在浏览器开发工具中应用font-family: var(--Anultra-Slab)，以确保字体被正确加载，查看并定位问题。
希望这有帮助!

如果你用的是tailwind，那么我是这样做的--首先在你的根样式文件（可能命名为globals.css或style.css）的顶部添加字体：

@font-face {
  font-family: "IntroRegular";
  src: url("/Fonts/IntroRegular.ttf");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "AnultraSlabRegular";
  src: url("/Fonts/AnultraSlabRegular.ttf");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

然后在tailwind.config.js文件中，扩展fontFamily以包含您的字体，如下所示：

theme: {
  extend: {
    fontFamily: {
      IntroRegular: ["IntroRegular", "sans-serif"],
      AnultraSlabRegular: ["AnultraSlabRegular", "sans-serif"]
     }
  }
}

现在，您可以像使用顺风字体一样使用这些字体，例如：

<main className="font-AnultraSlabRegular">