reactjs - 带有 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（此二进制文件省略了源代码）

我错过了什么？

标签： reactjsnext.jsstyled-components

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/ index.js
• 在 netlify 上部署：https ://eager-ardinghelli-b3d680.netlify.app/