使用打字稿和样式化组件在React应用中使用自定义字体

Question

我有一个来自create-react-app的React应用，我正在使用打字稿和样式化组件

我有一个globalStyles

import {createGlobalStyle} from 'styled-components';

export const GlobalStyle = createGlobalStyle`
    @font-face {
        font-family: 'modernline';
        font-style: normal;
        font-weight: 400;
        src: url("./fonts/modernline.ttf") format('ttf')
    }
`

我正在App.tsx中使用它

import React from 'react';
import {GlobalStyle} from './globalstyle'
// 
import styled from 'styled-components';

export const FontContainer = styled.div`
    font-family: 'modernline';
    font-size: 2em;
    color: red;
`

function App() {
  return (
    <div>
      <GlobalStyle />
      <h1>Font Test</h1>
      <FontContainer>
        Custom Font
      </FontContainer> 
    </div>
  );
}

export default App; 

cusotm字体不显示

在使用打字稿和样式化组件的create-react-app中使用自定义字体需要做什么

Answer 1

这些字体是从本地服务器获取的。路径是“ ./fonts/modernline.ttf”。检查您的网络请求，看一切是否正常。