使用 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; 

自定义字体不显示

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

Answer 1

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