如何在样式组件中注册多个字体粗细？

Question

您好，我想使用不同字体粗细的 Inter 字体（400、500、700）。现在它只加载国米常规。我正在使用带有打字稿和样式组件的 create-react-app。

全局样式：

export const GlobalStyle = createGlobalStyle`
  @font-face {
     font-family: 'Inter';
     src: url(${Inter}) format("truetype"),
     url(${InterWoff}) format("woff"),
     url(${InterWoff2}) format("woff2");
     font-weight: normal;
     font-style: normal;
  };
  @font-face {
    font-family: 'Inter';
    src: url(${InterMedium}) format('truetype')
    url(${InterMediumWoff}) format('woff'),
    url(${InterMediumWoff2}) format('woff2');
    font-weight: 500;
    font-style: normal;
  };
  @font-face {
    font-family: 'Inter';
    src: url(${InterBold}) format('truetype')
    url(${InterBoldWoff}) format('woff'),
    url(${InterBoldWoff2}) format('woff2');
    font-weight: bold;
    font-style: normal;
  }
  body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }

Answer 1

这就是我能够做到的

import { createGlobalStyle } from 'styled-components'
import { GalanoGrotesqueMedium, GalanoGrotesqueRegular } from 'assets/fonts'

const GlobalStyles = createGlobalStyle`
    @font-face {
        font-family: 'GalanoGrotesqueRegular';
        src: url(${GalanoGrotesqueRegular}) format('truetype');
    }
    @font-face {
        font-family: 'GalanoGrotesqueMedium';
        src: url(${GalanoGrotesqueMedium}) format('truetype');
    }
    * {
        font-family: 'GalanoGrotesqueRegular';
    }
`

export default GlobalStyles

我在哪里导入.ttf字体

这是我的资源/字体

export {default as GalanoGrotesqueMedium} from './fonts/GalanoGrotesqueMedium.ttf'
export {default as GalanoGrotesqueRegular} from './fonts/GalanoGrotesqueRegular.ttf'