在样式化组件 ReactJS 上导入 fonts-face [英] Import fonts-face on styled component ReactJS

问题描述

我在 ReactJS 应用程序中使用 styled component 库 css.我想 @font-face 但不工作.

I use styled component for library css on my ReactJS application. I want to @font-face but not working.

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')
);
....

推荐答案

@font-face {
 font-family: "MaisonNueue";
 src: url(${require('../assets/fonts/MaisonNeue-Book.otf')}) format("truetype");
}

@font-face {
 font-family: "MaisonNueueBold";
 src: url(${require('../assets/fonts/MaisonNeue-Bold.otf')}) format("truetype");
}

这篇关于在样式化组件 ReactJS 上导入 fonts-face的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！