自定义字体已加载但未应用于反应打字稿

Question

我正在开发 react typescript 项目并尝试加载自定义字体。 但我可以看到字体已加载到网络选项卡中，但字体仍未更改为我想要的。 我在 StackOverflow 中尝试了很多相关的帖子，但还是一样。 我最后做的是https://jcenter.bintray.com/。 这是我为字体添加的当前代码。

assets/fonts/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';
`

this link

[

Answer 1

您需要定义一个声明文件 d.ts 中提到的 https://dev.to/anteronunes/comment/171a3

Answer 2

您可以尝试如下更改全局字体吗？

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

注意上面没有空格/引号的 font-family 值。因此，在样式组件中：

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

Answer 3

您是否尝试过在 webpack 中创建规则？

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

Answer 4

检查您是否安装了文件加载器。

npm i -D 文件加载器