字体未加载到Reactjs中

这就是我在reactjs中加载字体文件的方式

import styled from 'styled-components';
import fontUrls from './UberMove-Bold.ttf';
import fontUrls1 from './UberMove-Light.ttf';
import fontUrls2 from './UberMove-Medium.ttf';
import fontUrls3 from './UberMove-Regular.ttf';

const Fonts = styled`
    @font-face {
       font-familty: 'UberMove-Light';
       src: url(${fontUrls1}) format('truetype');
    }`;

这会在导入时引发错误

未捕获错误：无法为以下组件创建样式化组件：@font-f.ace{font-famility:'UberMove-Light'；src:url（，）格式（'truetype'）；}

---

您需要全局加载字体，然后在组件中使用它：

import { createGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`
  body {
    @import url(${fontUrls1});
    font-family: 'UberMove-Light';
  }
`
const App = () => (
  <div>
    <GlobalStyles />

   //...

  </div>
)

从“样式化组件”导入{createGlobalStyle}；
const GlobalStyles=createGlobalStyle`
身体{
@导入url（${fontUrls1}）；
字体系列：“移动灯光”；
}
`
常量应用=（）=>(
//...
)