Reactjs 已加载自定义字体，但未在react typescript中应用

我正在开发react typescript项目并尝试加载自定义字体。 但我可以看到字体加载在网络选项卡，但字体仍然并没有更改为我想要的。 我在StackOverflow中尝试了许多相关的帖子，但仍然是一样的。 我做的最后一件事是。 这是我为字体添加的当前代码

资产/字体/globalfonts.ts

import { url } from 'inspector';
import {createGlobalStyle} from 'styled-components';

export const GlobalFonts = createGlobalStyle`
  @font-face {
    font-family: 'Trixie Plain';
    font-style: normal;
    font-weight: 400;
    src: url("./assets/fonts/Trixie-Plain.otf") format('opentype')
  }
`

src/components/TopBar/components/Nav.tsx

import React from 'react'
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'
import { GlobalFonts } from '../../../assets/fonts/globalfonts'

const Nav: React.FC = () => {
  return (
    <StyledNav>
      <GlobalFonts />
      <StyledLink exact activeClassName="active" to="/">
        Home
      </StyledLink>
    </StyledNav>
  )
}

const StyledNav = styled.nav`
  align-items: center;
  display: flex;
  font-family: 'Trixie Plain';
`

从“React”导入React
从“react router dom”导入{NavLink}
从“样式化组件”导入样式化
从“../../../assets/fonts/GlobalFonts”导入{GlobalFonts}
常量导航：React.FC=（）=>{
返回(
家
)
}
const StyledNav=styled.nav`
对齐项目：居中；
显示器：flex；
字体系列：“Trixie平原”；
`

---

[

你能试着改变下面的globals字体吗

export const GlobalFonts = createGlobalStyle`
  @font-face {
    font-family: TrixiePlain;
    // rest of declaration
  }
`

注意上面没有空格/引号的字体系列值。因此，在样式化组件中：

const StyledNav = styled.nav`
  align-items: center;
  display: flex;
  font-family: TrixiePlain;
`

---

您需要定义声明文件d.ts，如

---

您是否尝试在网页中创建规则

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff2|woff|eot|ttf|otf)$/,
        use: ["file-loader"],
      },
    ],
  },
}

---

检查是否安装了文件加载程序

---

npm i-D文件加载器

已尝试，但仍然相同。是的，但相同。它可以工作。谢谢。