使用 Next.js 和样式组件的本地字体

Question

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

这是我到目前为止所做的

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";
}

`;

注意 2 件事：

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

不确定接下来是否可以使用codesanbox，所以，

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