字体未在 Reactjs 中加载

Question

这就是我在 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-familty：'UberMove-Light';src：url(，( format('truetype'(;}.

Answer 1

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

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