React无法找到模块——ttf、otf字体

Question

我正在尝试加载本地字体，像下面的代码一样，但我一直收到Cannot find module '@/landing/fonts/Gotham-Bold.ttf'错误，不知道路径有什么问题。

我的文件夹结构看起来像这样，我正在处理的代码是LandingPage.tsx

import { createGlobalStyle } from 'styled-components';
import font from './fonts/Gotham-Bold.ttf'

const Gotham = createGlobalStyle`
  @font-face {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: bold;
    src:
      url(${font}) format('truetype'),
  }
`

- Phillip YS

---

你成功让它工作了吗？ - JonathanPeel

这是对我有效的方法。像这样导入... src: url（'../assets/fonts/gilroy/gilroy.woff2'）format（'woff2'）; - Shawn Sheehan

Answer 1

虽然这可能有点过时了，但它可能是Typescript的问题。使用字体文件时，您必须将格式声明为模块。

为此，您可以创建一个名为fonts.d.ts的文件，并在其中添加以下代码：

declare module '*.ttf';

这样，TypeScript 就知道如何处理 .ttf 文件了。 您还需要一个合适的 Webpack loader。

- Victor Feitosa

---

这对我来说抛出了“增强中的无效模块名称，找不到模块'*.ttf'。” - Sir hennihau

只是为了澄清一下，因为我花了一些时间才弄清楚文件应该放在哪里，它应该放在你创建用来存储.ttf文件的“fonts”文件夹中。至少在我的情况下，这解决了整个问题，谢谢！ - Manuel Mariano Silva

只是为了澄清一下，因为我花了一些时间才弄清楚文件应该放在哪里，它应该放在你创建用来存储.ttf文件的“fonts”文件夹中。至少在我的情况下，这解决了整个问题，谢谢！ - undefined

Answer 2

根据您的文件夹结构，LandingPages.tsx位于pages文件夹内。pages文件夹是fonts文件夹的同级目录。您需要从pages文件夹内部遍历到fonts文件夹。

正确的路径应该是'.././fonts/Gotham-Bold.ttf'

您需要向上移动一层(..)，然后进入fonts文件夹。

如果这解决了您的问题，请告诉我。

- Srijan

---

这不起作用。React 将显示一个“找不到模块”的错误。 - Antenaina

你是不是将点的顺序颠倒了？我非常确定应该是这样写的：./../fonts/etc.ttf。 - Manuel Mariano Silva