带有 Next.js 和样式化组件的本地字体

Question

我想为项目添加本地字体。
我正在使用来自styled-components 的next.js 和globalStyles。

这是我到目前为止所做的

import regularFont from "../public/fonts/IRANYekanRegular.ttf";

const GlobalStyle = createGlobalStyle<{ lang?: Languages_type | string }>`
@font-face {
  font-family: "ir";
  src: local("ir"), url(${regularFont}) format("truetype");
}     
 
body,
html {
  margin: 0;
  font-family:"ir ";
}

`;

但是上面的代码会抛出错误

./public/fonts/IRANYekanRegular.ttf 模块解析失败：意外 字符 '' (1:0) 你可能需要一个合适的加载器来处理这个 文件类型，目前没有配置加载器来处理这个文件。 见https://webpack.js.org/concepts#loaders（源代码省略 这个二进制文件）

我错过了什么？

Answer 1

在 Next.js 和 React 应用程序中，您可以使用绝对路由访问 public 文件。

因此，在您的 CSS 中，您可以执行以下操作：

const GlobalStyle = createGlobalStyle<{ lang?: Languages_type | string }>`
@font-face {
  font-family: "ir";
  src: local("ir"), url('/fonts/IRANYekanRegular.ttf') format("truetype");
}     
 
body,
html {
  margin: 0;
  font-family:"ir";
}

`;

注意两件事：

• 我没有导入文件
• 我正在使用公开后的路线

不确定是否可以使用codesanbox for next，所以，

• 我在 Repo 上创建（你可以检查提交）：https://github.com/joseglego/font-test - 定义是：https://github.com/joseglego/font-test/blob/main/pages/index.js
• 在 netlify 上部署：https://eager-ardinghelli-b3d680.netlify.app/