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

Posted 2023-03-15

【中文标题】带有 Next.js 和样式化组件的本地字体

【英文标题】：Local fonts with Next.js and Styled Components

【发布时间】：2021-11-17 02:30:41

【问题描述】：

我想为项目添加本地字体。 我正在使用来自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（源代码省略 这个二进制文件）

我错过了什么？

【参考方案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/

【讨论】：

错误消失但字体不适用。 IDE 自动完成中的绝对路径也建议从根目录开始，而不是公共目录。有什么想法吗？

让我试试看！

你不会相信的！但你在体内/使用：font-family:"it "; （有一个空格，定义中只有font-family: "ir";

我删除了它，仍然没有应用。也许我应该在_document 文件中添加指向Head 的链接，你不觉得吗？

我用一个 github 示例（带有提交）和 netlify 服务器运行更新了我的答案:) 你能检查一下吗？