如何使用样式化组件在 Reactjs 中导入本地字体？

Question

import { createGlobalStyle } from "styled-components";

createGlobalStyle`
  @font-face {
    font-family: 'Segoe Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: url('SegoePro-Regular.woff') format('woff');
}`

之后我添加import "./components/GlobalStyles";到 index.js

我试图在某些组件中使用它，font-family: Segoe Pro Regular;但它不起作用

---

我也试过导入

import Font from "./SegoePro-Regular.woff"
import { createGlobalStyle } from "styled-components";

    createGlobalStyle`
      @font-face {
        font-family: 'Segoe Pro Regular';
        font-style: normal;
        font-weight: normal;
        src: url(${Font}) format('woff');
    }`

Answer 1

font-family: Segoe Pro Regular; 不是有效的语法，您应该尝试：

font-family: 'Segoe Pro Regular';

这是一个可供参考的工作示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { createGlobalStyle } from 'styled-components';
import MajorMonoTTF from './MajorMonoDisplay-Regular.ttf';

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'Major Mono Display';
    src: url(${MajorMonoTTF}) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: auto;
  }
  h1 {
    font-family: 'Major Mono Display';
  }
`;

const App = () => (
  <>
    <GlobalStyle />
    <h1>Cool Title</h1>
  </>
);

ReactDOM.render(<App />, document.getElementById('root'));