使用typescript和styled-components在React应用中使用自定义字体

Question

我有一个来自create- React -app的react应用程序，我正在使用typescript和styled-components

我有一台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字体不显示

在使用typescript和styled-components的create-react-app中使用自定义字体需要做什么

Answer 1

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