javascript - 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'),
  }
`

Answer 1

知道这个有点老了，但它可能是 Typescript 的问题。在 Typescript 中使用字体文件时，您必须将格式声明为模块。

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

declare module '*.ttf';

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