Question

我的目标是在我的 nextjs/tailwind 项目中使用自定义字体。当我在本地服务器上运行项目时，字体会正确显示，即使我进行生产构建并在本地运行，但在将其部署到生产服务器时也不会。在控制台中，我收到以下消息：

GET https://website.com/fonts/Some-Font1.ttf net::ERR_ABORTED 503  
GET https://website.com/fonts/Some-Font2.ttf net::ERR_ABORTED 503

我尝试寻找类似的错误，但没有运气。我尝试调整 next.config，并添加了一个名为 next-fonts 的包，但没有帮助。由于一切都在本地运行，因此每次我进行需要很长时间的更改时都必须部署该项目。

字体是 ttf 文件，位于 /public/fonts 中。公共文件夹中的其他资产（例如 svgs）可在生产中访问。奇怪的是，同样位于公共文件夹中的收藏夹图标也不会在生产中显示，也是由于 503 错误。

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@font-face {
  font-family: "SomeFont";
  src: url(/fonts/SomeFont-Regular.ttf);
  font-weight: 400;
}

Answer 1

这里是错误

 src: url(/fonts/SomeFont-Regular.ttf);

它应该是引号“”

  src: url("/fonts/SomeFont-Regular.ttf");

在本地服务器上加载但不在生产中的字体

1 个答案: