javascript - 在样式化的组件 ReactJS 上导入 fonts-face

Question

我在我的 ReactJS 应用程序上使用 styled component 作为库 css。我想 @font-face 但不工作。

GlobalStyle.js 上的代码

import {  createGlobalStyle } from 'styled-components';
import MaisonBook from '../assets/fonts/MaisonNeue-Book.ttf';


const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: Maison Nueue;
    src: url(${MaisonBook});
  }
  @font-face {
    font-family: Maison Nueue;
    src: url('../assets/fonts/MaisonNeue-Bold.ttf');
    font-weight: bold;
  }
`

export default GlobalStyle;

关于 index.js

....
ReactDOM.render(
  <React.StrictMode>
    <GlobalStyle/>
    <MainRouter />
  </React.StrictMode>,
  document.getElementById('root')
);
....

Answer 1

字体名称应放在引号中:font-family: 'Maison Neue';

import {  createGlobalStyle } from 'styled-components';
import MaisonBook from '../assets/fonts/MaisonNeue-Book.ttf';

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'Maison Nueue';
    src: url(${MaisonBook});
  }
  h1 {
     font-family: 'Maison Nueue';
  }
`

export default GlobalStyle;

和

....
ReactDOM.render(
  <React.StrictMode>
    <GlobalStyle/>
    <h1>Is it works?</h1>
    <MainRouter />
  </React.StrictMode>,
  document.getElementById('root')
);
....