自定义字体已加载但未在 React TypeScript 中应用

Question

我正在开发 React TypeScript 项目并尝试加载自定义字体。但我可以看到字体已加载到“网络”选项卡中，但字体仍未更改为我想要的。我在 Whosebug 中尝试了很多相关的 post 但还是一样。我最后做的是 this link。这是我为字体添加的当前代码。

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';
`

[

Answer 1

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

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

注意上面没有 space/quotes 的字体系列值。因此，在样式组件中：

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

Answer 2

你需要定义一个声明文件d.ts https://dev.to/anteronunes/comment/171a3

Answer 3

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

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

Answer 4

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

npm i -D 文件加载器

自定义字体已加载但未在 React TypeScript 中应用

custom font is loaded but not applying in react typescript

fonts

font-face

typescript

reactjs